<template>
  <div class="contentList">
    <el-button type="primary" @click="dialogTableVisible = true">上传服务合同</el-button>

    <el-table v-loading="loading" :data="tabData.data" style="width: 100%; margin-top: 2em" border>
      <el-table-column label="序号" type="index" width="70" align="center"></el-table-column>

      <el-table-column label="合同编号" prop="contactName" align="center"></el-table-column>
      <el-table-column label="合同甲方" prop="contactName" align="center"></el-table-column>
      <el-table-column label="合同乙方" prop="contactCell" align="center"></el-table-column>
      <el-table-column label="合同金额" prop="contactCell" align="center"></el-table-column>
      <el-table-column label="发布时间" align="center">
        <template #default="scope">
          {{ moment(scope.row.addTime).format('yyyy-MM-DD hh:mm:ss') || '暂无' }}
        </template>
      </el-table-column>
      <el-table-column label="签署文件" prop="contactCell" align="center"></el-table-column>
      <el-table-column label="备注" prop="contactCell" align="center"></el-table-column>
    </el-table>

    <div class="page_style">
      <Page :total="tabData.total" :model-value="currentPage" show-elevator show-total @on-change="changePage" />
    </div>

    <el-dialog v-model="dialogTableVisible" title="服务合同上传" width="650">
      <el-form v-model="form" ref="formRef" label-width="100px">
        <el-form-item label="合同编号">
          <el-input v-model="form.contactName" placeholder="请输入合同编号"></el-input>
        </el-form-item>
        <el-form-item label="合同甲方">
          <el-input v-model="form.contactName" placeholder="请输入合同甲方"></el-input>
        </el-form-item>
        <el-form-item label="合同乙方">
          <el-input v-model="form.contactName" placeholder="请输入合同乙方"></el-input>
        </el-form-item>
        <el-form-item label="合同金额">
          <el-input v-model="form.contactName" placeholder="请输入合同金额"></el-input>
        </el-form-item>
        <el-form-item label="签署日期">
          <el-date-picker v-model="form.contactName" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="合同文件">
          <el-upload
            style="width: 50%"
            :action="uploadUrl"
            :on-success="onSuccess"
            ref="upload"
            :headers="{ 'X-AIYANGNIU-SIGNATURE': token }"
            :on-exceed="handleExceed"
            v-model:file-list="fileList"
            :limit="1"
          >
            <el-button type="primary">点击上传</el-button></el-upload
          >
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="form.contactName" placeholder="请输入备注"></el-input>
        </el-form-item>
        <el-form-item>
          <div style="width: 80%; text-align: center">
            <el-button type="primary" @click="submitForm(formRef)" :loading="loading"> 提交 </el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import { defineComponent, ref, reactive, onMounted } from 'vue'
import { Modal } from 'view-ui-plus'
import { publishStatus, intentionStatus } from '@/utils/system/filters'
import moment from 'moment'
import { cow } from '@/request/api'
let typesearchFilter = reactive({ limit: 10, offset: 0, type: 2, hasIntent: 1 })
import api from '@/request/apiConfig' //真实接口配置

const form = ref({})
const formRef = ref()

const token = localStorage.aynUserToken
const uploadUrl = api.apiManager + '/manager/images/upload'
const fileList = ref([])

const onSuccess = (res, file) => {
  console.log(res)
  fileList.value = []
  fileList.value.push(file)
  form.value.shopFeeContractUrl = res.data
}
const upload = ref()
const handleExceed = (files, fileList) => {
  upload.value.clearFiles()
  const file = files[0]
  file.uid = genFileId()
  upload.value.handleStart(file)
  upload.value.submit()
}
const submitForm = async formEl => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      loading.value = true
      cow
        .updateServiceFee(form.value)
        .then(res => {
          loading.value = false
          Message.success('更新成功')
          getServiceFee()
        })
        .catch(err => {
          loading.value = false
        })
    } else {
      console.log('error submit!', fields)
    }
  })
}

let tabData = ref({})
const loading = ref(false)
//获取列表内容
async function getData() {
  loading.value = true
  await cow.getCattleDealPageByAdminAndType(typesearchFilter).then(res => {
    if (res.code == 101) {
      tabData.value = res || {}
    }
  })
  loading.value = false
}

let currentPage = ref(1)
//更改页码
function changePage(page) {
  if (tabData.value.limit) {
    typesearchFilter.offset = (page - 1) * tabData.value.limit //更新偏移量
    currentPage.value = page //切换当前页码
    getData() //获取广告数据
  }
}

const tableData = ref([])
let dialogTableVisible = ref(false)
let tableLoading = ref(false)
async function showDetail(id) {
  tableLoading.value = true
  dialogTableVisible.value = true
  await cow.intendList({ dealId: id, limit: 1000 }).then(res => {
    tableData.value = res.data
  })
  tableLoading.value = false
}

onMounted(() => {
  getData()
})
</script>

<style lang="scss" scoped>
.contentList {
  padding: 1em;
  .page_style {
    text-align: right;
    margin-top: 1em;
    background-color: var(--system-container-background);
  }
}
</style>
