<template>
  <div class="custom-info">
    <!-- form -->
    <a-form-model ref="form" layout="vertical" :model="form">
      <a-row :gutter="30">
        <a-col :xl="6" :lg="6" :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 :xl="6" :lg="6" :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 :xl="5" :lg="6" :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 :xl="5" :lg="6" :sm="12">
          <a-form-model-item label="保险公司">
            <a-select v-model="form.payorId" placeholder="请选择保险公司" allow-clear>
              <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 :xl="6" :lg="6" :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 :xl="18" :lg="18" :sm="12" class="none-label">
          <a-form-model-item label="button">
            <a-button type="primary" @click="addNewCustom"><Icon name="ssiadd" :size="14" />新建客户</a-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 -->
    <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>
        <!-- <a-button type="link" class="success">新增</a-button> -->
        <!-- <a-popconfirm title="你确定要删除吗？" ok-text="确定" cancel-text="取消" @confirm="deleteData(record)">
          <a-button type="link" class="danger" @click.stop>删除</a-button>
        </a-popconfirm> -->
      </template>
    </a-table>
    <!--分页-->
    <BurtPagination :pagination="pager" @pageChange="_getCustomerList" />
  </div>
</template>

<script>
import BurtPagination from "@/components/CUSTOMER/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,
      form: {},
      pageForm: {},
      companyCode: [],
      dataList: [],
      pager: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  mixins: [mixins],
  components: {
    BurtPagination,
  },
  created() {
    this._getCustomerList();
    this._getPayorCode();
  },
  methods: {
    //重置
    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.CREATECUSTOMERCLAIMPGF(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('download', file_name);
          link.setAttribute('target', "_blank");
          link.setAttribute('alt', file_name);
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
      })
    },
    deleteData(data) {
      this.$apis.DELETECUSTOM({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);
}
.red-text{
  color: red;
}
</style>