<template>
  <div>
    <a-card>
      <a-tabs v-model="tabKey" :animated="false" @change="callback">
        <a-tab-pane :key="1" :tab="'未审核(' + noAuditCount + ')'"> </a-tab-pane>
        <a-tab-pane :key="2" :tab="'已审核(' + auditCount + ')'"> </a-tab-pane>
      </a-tabs>
      <SearchWrap @getDatas="getDatas" />
      <PublicTable
        :columns="columns"
        :dataSource="datas"
        :tableLoading="loading"
        :total="total"
        @queryData="getDatas"
        size="middle"
      >
        <span slot="suiShenCode" slot-scope="record">
          <a @click="view(record)">查看</a>
        </span>
        <template slot="action" slot-scope="record">
          <a-popconfirm title="确定通过吗？" ok-text="确定" cancel-text="取消" @confirm="pass(record.id)">
            <a>通过</a>
          </a-popconfirm>
          <a-divider type="vertical" />
          <a @click="refuse(record.id)">不通过</a>
        </template>
      </PublicTable>
    </a-card>
    <a-modal title="拒绝" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel">
      <a-form-model ref="ruleForm" :rules="rules" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="拒绝理由" prop="refusalCause">
          <a-textarea
            v-model="form.refusalCause"
            placeholder="请填写拒绝原因"
            :auto-size="{ minRows: 3, maxRows: 5 }"
          />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <CertificateModal :visible="withCodeVisible" :withCode="withCode" />
  </div>
</template>

<script>
import PublicTable from '../PublicTable.vue'
import SearchWrap from './search_wrap.vue'
import CertificateModal from './CertificateModal.vue'
export default {
  components: {
    PublicTable,
    SearchWrap,
    CertificateModal,
  },
  data() {
    return {
      tabKey: 1,
      visible: false,
      confirmLoading: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      form: {
        id: null,
        status: 3,
        refusalCause: '',
      },
      rules: {
        refusalCause: [
          {
            required: true,
            message: '请填写拒绝原因',
            trigger: 'blur',
          },
        ],
      },
      columns: [
        {
          title: '申请人',
          dataIndex: 'applicantName',
          align: 'center',
          width: 90,
        },
        {
          title: '电话',
          dataIndex: 'applicantPhone',
          align: 'center',
          width: 100,
        },

        {
          title: '来访事由',
          dataIndex: 'visitTheReason',
          align: 'center',
          width: 110,
        },
        {
          title: '被访人姓名',
          dataIndex: 'inviterName',
          align: 'center',
          width: 90,
        },
        {
          title: '被访人部门',
          dataIndex: 'inviterDeptName',
          align: 'center',
          width: 120,
        },
        {
          title: '来访时间',
          dataIndex: 'beginTime',
          align: 'center',
          width: 120,
        },
        // {
        //   title: '审核状态',
        //   dataIndex: 'status',
        //   align: 'center',
        //   width: 100,
        // },
        // {
        //   title: '拒绝原因',
        //   dataIndex: 'refusalCause',
        //   align: 'center',
        //   width: 120,
        // },
        {
          title: '随申码',
          align: 'center',
          scopedSlots: { customRender: 'suiShenCode' },
          width: 90,
        },
        {
          title: '操作',
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          width: 100,
        },
      ],
      datas: [],
      loading: false,
      total: 0,
      noAuditCount: 0,
      auditCount: 0,
      status: 1,
      withCodeVisible: false,
      // 随申码照片
      withCode: {
        facePhotos: '',
        photo1: '',
        photo2: '',
      },
    }
  },
  created() {
    this.init()
    this.oneColumns = JSON.parse(JSON.stringify(this.columns))
  },
  methods: {
    init() {
      this.getDatas()
    },
    async getDatas(e) {
      this.loading = true
      const url = this.$address.api.getApplyForList
      const data = {
        params: {
          status: this.status,
          ...e,
        },
      }
      const res = await this.$http.get(url, data)
      if (res.code === 200) {
        this.loading = false
        this.datas = res.result.records
        this.total = res.result.total
        this.auditCount = res.result.params.auditCount
        this.noAuditCount = res.result.params.noAuditCount
      }
    },
    callback(e) {
      this.datas = []
      this.status = e
      if (e === 2) {
        this.columns = this.columns.filter((item) => item.dataIndex !== 'action')
        this.getDatas()
      } else {
        this.columns = this.oneColumns
        this.getDatas()
      }
    },
    // 查看随申码
    view(e) {
      // console.log(e)
      this.withCode.facePhotos = e.applicantFaceImage
      if (e.applicantHealthRouteImage) {
        const arrPhotos = e.applicantHealthRouteImage.split(',')
        this.withCode.photo1 = arrPhotos[0]
        this.withCode.photo2 = arrPhotos[1]
      }
      this.withCodeVisible = true
    },
    // 审核通过
    async pass(id) {
      const url = this.$address.api.auditApplyFor
      const data = {
        params: {
          id: id,
          status: 2,
        },
      }
      const res = await this.$http.get(url, data)
      if (res.code === 200) {
        this.$message.success('已通过')
        this.getDatas()
      }
    },
    refuse(id) {
      this.visible = true
      this.form.id = id
    },
    // 审核不通过
    handleOk() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.confirmLoading = true
          const url = this.$address.api.auditApplyFor
          const data = {
            params: this.form,
          }
          const res = await this.$http.get(url, data)
          if (res.code === 200) {
            this.form = {}
            this.visible = false
            this.confirmLoading = false
            this.$message.success('已拒绝')
            this.getDatas()
          } else {
            this.confirmLoading = false
          }
        } else {
          return false
        }
      })
    },
    handleCancel() {
      this.visible = false
    },
    isShowWithCode() {
      this.withCodeVisible = false
      this.withCode = {}
    },
  },
}
</script>

<style scoped>
</style>
