<template>
  <template-page
    v-if="showTable"
    ref="pageRef"
    :get-list="getList"
    :exportList="status === 'ToBeReviewed' ? undefined : exportList"
    :table-attributes="tableAttributes"
    :table-events="tableEvents"
    :options-evens-group="optionsEvensGroup"
    :moreParameters="moreParameters"
    :column-parsing="columnParsing"
    :operation="operation()"
  >
    <div slot="moreSearch">
      <el-radio-group v-model="status" size="mini" @change="changeType">
        <el-radio-button label="NO">未签署({{ tongji[0] || 0 }})</el-radio-button>
        <el-radio-button label="YES">已签署</el-radio-button>
        <el-radio-button label="">全部</el-radio-button>
        <el-radio-button label="ToBeReviewed">待审核({{ tongji[1] || 0 }})</el-radio-button>
      </el-radio-group>
      <br /><br />
    </div>
    <div class="cartographer_big">
      <el-dialog
        title="师傅签署信息"
        width="100%"
        :modal="false"
        :visible.sync="formDialog"
        :before-close="handleClose"
      >
        <zj-page-container>
          <zj-page-fill>
            <div style="box-sizing: border-box; padding: 20px 20px 0 20px">
              <zj-form-container ref="formRef" :form-data="formData" :form-attributes="{ size: 'mini' }">
                <zj-form-module title="详细信息" label-width="100px" :form-data="formData" :form-items="formItems">
                </zj-form-module>
              </zj-form-container>
            </div>
          </zj-page-fill>
          <div style="text-align: right; box-sizing: border-box; padding: 16px 20px">
            <el-button size="mini" @click="handleClose">取消</el-button>
            <el-button v-if="status === 'ToBeReviewed'" type="primary" size="mini" @click="shenhecz('OK')"
              >审核通过</el-button
            >
            <el-button v-if="status === 'ToBeReviewed'" type="danger" size="mini" @click="shenhecz('FAIL')"
              >审核驳回</el-button
            >
          </div>
        </zj-page-container>
      </el-dialog>
    </div>
  </template-page>
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
import import_mixin from '@/components/template/import_mixin.js'
import operation_mixin from '@/components/template/operation_mixin.js'
import {
  workerElecConfirmList,
  workerElecConfirmListExport,
  workerElecConfirmDetail,
  workerElecConfirmCount,
  workerElecConfirmManualList,
  workerElecConfirmManualDetail,
  workerElecConfirmManualConfirm,
  workerElecConfirmManualCount
} from '@/api/masterEPaymentSigning.js'
import ImageUpload from '@/components/file-upload'
export default {
  components: { TemplatePage, ImageUpload },
  mixins: [import_mixin, operation_mixin],
  data() {
    return {
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: false
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      // 勾选选中行
      recordSelected: [],
      /** 表单变量 */
      formDialog: false,
      formData: {},
      status: 'NO',
      showTable: true,
      tongji: []
    }
  },
  computed: {
    // 事件组合
    optionsEvensGroup() {
      return []
    },
    // 更多参数
    moreParameters() {
      return []
    },
    formItems() {
      return [
        {
          isShow: this.status !== 'ToBeReviewed',
          md: 6,
          name: 'el-radio',
          options: [
            { label: '已签', value: 'YES' },
            { label: '未签', value: 'NO' }
          ],
          attributes: { disabled: true },
          formItemAttributes: {
            label: '状态',
            prop: 'status',
            rules: []
          }
        },
        {
          isShow: this.status === 'ToBeReviewed',
          md: 6,
          name: 'el-radio',
          options: [
            { label: '通过', value: 'OK' },
            { label: '待审', value: 'WAIT' }
          ],
          attributes: { disabled: true },
          formItemAttributes: {
            label: '状态',
            prop: 'status',
            rules: []
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: { disabled: true, placeholder: '' },
          formItemAttributes: { label: '所属公司', prop: 'belongCompany' }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: { disabled: true, placeholder: '' },
          formItemAttributes: { label: '所属公司编号', prop: 'belongCompanyCode' }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: { disabled: true, placeholder: '' },
          formItemAttributes: { label: '师傅名称', prop: 'nickName' }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: { disabled: true, placeholder: '' },
          formItemAttributes: { label: '师傅电话', prop: 'mobile' }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: { disabled: true, placeholder: '' },
          formItemAttributes: { label: '身份证', prop: 'idCard' }
        },
        {
          isShow: this.formData.url,
          md: 24,
          name: 'slot-component',
          formItemAttributes: {
            label: '确认书',
            prop: 'url',
            rules: []
          },
          render: (h, { props, onInput }) => {
            return (
              <el-image
                style="width: 120px; height: 120px"
                src={this.formData.url}
                preview-src-list={[this.formData.url]}
              ></el-image>
            )
          }
        }
      ]
    }
  },
  methods: {
    changeType(v) {
      this.showTable = false
      this.status = v
      this.$nextTick(() => {
        this.showTable = true
      })
    },
    // 列表请求函数
    getList(p, cb) {
      var pam = JSON.parse(JSON.stringify(p))
      try {
        if (this.status === 'ToBeReviewed') {
          cb && cb(pam)
          return workerElecConfirmManualList(pam)
        } else {
          if (this.status) {
            pam.params.push({ param: 'a.status', compare: '=', value: this.status })
          }
          cb && cb(pam)
          return workerElecConfirmList(pam)
        }
      } catch (err) {
      } finally {
        Promise.all([workerElecConfirmCount(), workerElecConfirmManualCount()]).then(([res1, res2]) => {
          this.tongji = [res1.data, res2.data]
        })
      }
    },
    // 列表导出函数
    exportList: workerElecConfirmListExport,
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      return defaultData
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    },
    handleClose() {
      this.$refs?.formRef?.resetFields()
      this.$data.formData = this.$options.data().formData
      this.formDialog = false
    },
    shenhecz(s) {
      workerElecConfirmManualConfirm({
        id: this.formData.id,
        status: s
      }).then(res => {
        this.$message({ type: 'success', message: `审核成功!` })
        this.$refs.pageRef.refreshList()
        this.handleClose()
      })
    },

    // 操作按钮
    operation() {
      return this.operationBtn({
        details: {
          conditions: ({ row, index, column }) => {
            return this.status !== 'ToBeReviewed'
          },
          click: ({ row, index, column }) => {
            workerElecConfirmDetail({
              belongCompanyCode: row.belongCompanyCode,
              workerNumber: row.workerNumber,
              userId: row.userId
            }).then(res => {
              this.formData = res.data
              this.$nextTick(() => {
                this.formDialog = true
              })
            })
          }
        },
        shenhe: {
          conditions: ({ row, index, column }) => {
            return this.status === 'ToBeReviewed'
          },
          click: ({ row, index, column }) => {
            workerElecConfirmManualDetail({
              id: row.id
            }).then(res => {
              this.formData = res.data
              this.$nextTick(() => {
                this.formDialog = true
              })
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
