<template>
  <div class="custom-info">
    <!-- form -->
    <a-form-model
      ref="form"
      :model="form"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-row :gutter="30">
        <a-col :xxl="6" :xl="8" :sm="12">
          <a-form-model-item label="病历号码">
            <a-input
              v-model="form.mrnNo"
              placeholder="请输入病历号"
              allow-clear
            ></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :xxl="6" :xl="8" :sm="12">
          <a-form-model-item label="客户姓名">
            <a-input
              v-model="form.patientName"
              placeholder="请输入客户姓名"
              allow-clear
            ></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :xxl="6" :xl="8" :sm="12">
          <a-form-model-item label="出生日期">
            <a-date-picker
              v-model="form.birthday"
              placeholder="请选择出生日期"
              value-format="YYYY-MM-DD 00:00:00"
              allow-clear
            ></a-date-picker>
          </a-form-model-item>
        </a-col>
        <a-col :xxl="6" :xl="8" :sm="12">
          <a-form-model-item label="保险公司">
            <a-select
              v-model="form.payorId"
              placeholder="请选择保险公司"
              show-search
              allow-clear
              :dropdownMatchSelectWidth="false"
              :filterOption="filterCode"
            >
              <a-select-option
                v-for="item in companyCode"
                :key="item.corpCode"
                :value="item.id"
                >{{ item.longName }}</a-select-option
              >
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xxl="6" :xl="8" :sm="12">
          <a-form-model-item label="保单号码">
            <a-input
              v-model="form.policyNo"
              placeholder="请输入保单号码"
              allow-clear
            ></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :xxl="18" :xl="8" :sm="12" class="none-label">
          <a-form-model-item label="button">
            <a-button class="mar-left10" type="primary" @click="handlerSearch">
              <Icon name="ssisearch_active" :size="14" />查询
            </a-button>
            <a-button class="mar-left10" type="primary" @click="resetEvt">
              <Icon name="ssireset" :size="14" />重置
            </a-button>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>

    <!-- table -->
    <div class="scroll-table">
      <a-table
        :columns="columns"
        :data-source="dataList"
        :scroll="{ x: true }"
        :pagination="false"
        :customRow="handlerRowClick"
      >
        <template slot="sex" slot-scope="text">
          <span>{{ text | formatSex }}</span>
        </template>
        <template slot="operation" slot-scope="record">
          <a-button
            type="link"
            v-if="!record.isExpired"
            @click.stop="changeDataStatus(record)"
            >修改</a-button
          >
          <a-button type="link" @click.stop="printClaimPdf(record)"
            >打印理赔申请书</a-button
          >
          <a-button type="link" @click.stop="changeDataStatus(record, '2')"
            >新增保单</a-button
          >
        </template>
      </a-table>
      <!--分页-->
      <BurtPagination :pagination="pager" @pageChange="_getCustomerList" />
    </div>
  </div>
</template>

<script>
import BurtPagination from '@/components/Customers/pagation'
import { downloadFile } from '@/utils/index'
import moment from 'moment'
import mixins from '@/mixins'
export default {
  data() {
    const dateFormat = (val) => {
      return val && moment(val).format('YYYY-MM-DD')
    }
    const columns = [
      { title: '病历号', dataIndex: 'mrnNo', width: 180 },
      { title: '客户姓名', dataIndex: 'patientName', width: 120 },
      {
        title: '出生日期',
        dataIndex: 'birthday',
        width: 170,
        customRender: dateFormat
      },
      {
        title: '性别',
        dataIndex: 'sex',
        width: 80,
        scopedSlots: { customRender: 'sex' }
      },
      { title: '保险公司', dataIndex: 'payorName', width: 180 },
      { title: '保险卡号', dataIndex: 'cardNo', width: 190 },
      {
        title: '保单生效日期',
        dataIndex: 'startDate',
        width: 170,
        customRender: (val, row) => {
          const formatDate = dateFormat(val)
          if (row.isExpired) {
            return <span class="red-text">{formatDate}</span>
          }
          return formatDate
        }
      },
      {
        title: '保单终止日期',
        dataIndex: 'endDate',
        width: 170,
        customRender: (val, row) => {
          const formatDate = dateFormat(val)
          if (row.isExpired) {
            return <span class="red-text">{formatDate}</span>
          }
          return formatDate
        }
      },
      {
        title: '操作',
        key: 'operation',
        width: '270px',
        fixed: 'right',
        scopedSlots: { customRender: 'operation' },
        align: 'center'
      }
    ]
    return {
      columns,
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      form: {},
      pageForm: {},
      companyCode: [],
      dataList: [],
      pager: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  mixins: [mixins],
  components: {
    BurtPagination
  },
  created() {
    this._getPayorCode()
  },
  methods: {
    // 选择框筛选
    filterCode(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      )
    },
    //重置
    resetEvt() {
      this.form = {}
      this.pageForm = {}
    },
    handlerRowClick(record) {
      const { id, patientPolicyId } = record
      return {
        style: {
          color: record.isEdit ? '#2B63FF' : '#252631'
        },
        on: {
          click: () => {
            if (record.isEdit) {
              return true
            }
            if ((record.cardNo || '').startsWith('80001428')) {
              this.$apis
                .getJumpEccsUrl({
                  cardNo: record.cardNo
                })
                .then((res) => {
                  if (res.returnCode === '0000') {
                    window.open(res.content, '_blank')
                  } else {
                    this.$message.error(res.returnMsg || '操作失败')
                  }
                })
            } else {
              this.$router.push({
                name: 'welfareInfo',
                query: { id, patientPolicyId }
              })
            }
          }
        }
      }
    },
    // 修改按钮
    changeDataStatus(record, type) {
      const { id, patientPolicyId } = record
      this.$router.push({
        name: 'customerEdit',
        query: { id, patientPolicyId, type }
      })
    },
    saveChange(record) {
      record.isEdit = undefined
      record.isNew = undefined
    },
    handlerSearch() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return false
        }
        this.pager.pageNum = 1
        this.pageForm = this.$lodash.cloneDeep(this.form)
        this._getCustomerList()
      })
    },
    printClaimPdf(data) {
      this.$apis.createCustomerClaimPdf(data).then((res) => {
        const { url, file_name } = downloadFile(res)
        console.log(url, file_name)
        let link = document.createElement('a')
        link.setAttribute('href', url)
        link.setAttribute('target', '_blank')
        link.setAttribute('alt', file_name)
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      })
    },
    deleteData(data) {
      this.$apis.deleteCustomer({ id: data.id }).then((res) => {
        if (res.returnCode === '0000') {
          this.$message.success(res.returnMsg || '操作成功')
          this._getCustomerList()
        } else {
          this.$message.error(res.returnMsg || '操作失败')
        }
      })
    },
    // 新建客户信息
    addNewCustom() {
      this.$router.push('/customer/edit')
    },
    _getPayorCode() {
      this.$apis.getPayorCode({}).then((res) => {
        this.companyCode = res.content || []
      })
    },
    _getCustomerList() {
      const data = {
        ...this.pageForm,
        ...this.pager
      }
      this.$apis.getCustomerList(data).then((res) => {
        this.pager.total = (res.content && res.content.total) || 0
        const data = (res.content && res.content.list) || []
        data.forEach((item) => {
          item.isExpired =
            moment(item.endDate).valueOf() < moment(new Date()).valueOf()
        })
        console.log(data)
        this.dataList = data
      })
    }
  }
}
</script>
<style lang="less" scoped>
.none-label {
  text-align: right;
  .ant-form-item-label {
    opacity: 0;
  }
}
.ant-btn .icon-class {
  .mg-r(10);
}
.scroll-table {
  height: calc(100vh - 210px);
  overflow: scroll;
}
@media screen and (min-width: 1920px) {
  .scroll-table {
    height: calc(100vh - 250px);
    overflow: scroll;
  }
}
</style>