<template>
  <div class="welfare">
    <!-- 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="病历号码" prop="mrnNo">
            <a-input v-model="form.mrnNo" placeholder="请输入客户号码"></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :xl="4" :lg="6" :sm="12">
          <a-form-model-item label="客户姓名" prop="patientName">
            <a-input v-model="form.patientName" placeholder="请输入客户姓名"></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :xl="4" :lg="6" :sm="12">
          <a-form-model-item label="出生日期" prop="birthday">
            <a-date-picker v-model="form.birthday" placeholder="请选择出生日期" value-format="YYYY-MM-DD 00:00:00"></a-date-picker>
          </a-form-model-item>
        </a-col>
        <a-col :xl="4" :lg="6" :sm="12">
          <a-form-model-item label="性别" prop="sex">
            <a-radio-group v-model="form.sex" :default-value="form.sex" button-style="solid">
              <a-radio-button value="M"> 男 </a-radio-button>
              <a-radio-button class="mar-left10" value="F"> 女 </a-radio-button>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :xl="6" :lg="6" :sm="12">
          <a-form-model-item label="证件号码" prop="idNo">
            <a-input v-model="form.idNo" allow-clear placeholder="请输入证件号码"></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :xl="6" :lg="6" :sm="12">
          <a-form-model-item label="保险公司" prop="payorId">
            <a-select v-model="form.payorId" placeholder="请选择保险公司" show-search allow-clear @change="payorChange" :filterOption="filterCode">
              <a-select-option v-for="item in companyCode" :key="item.id" :value="item.id">
                {{ item.longName }}
              </a-select-option>
            </a-select>
          </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" class="text-r" @click="handlerReset">
              <Icon name="ssireset" :size="14" />重置
            </a-button>
            <a-button type="primary" class="mar-left10" @click="handlerSearch">
              <Icon name="ssisearch_active" :size="14" />查询
            </a-button>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <div v-if="customList && customList.length">
      <a-table
        :columns="customColumns"
        :data-source="customList"
        row-key="mrnNo"
        :scroll="{ x: true }"
        :pagination="false"
        :customRow="handlerRowClick">
        <template slot="sex" slot-scope="text">
          <span>{{text | formatSex}}</span>
        </template>
        <template slot="birthday" slot-scope="text">
          <span>{{text?moment(text).format('YYYY-MM-DD'):''}}</span>
        </template>
        <template slot="startDate" slot-scope="text">
          <span>{{text?moment(text).format('YYYY-MM-DD'):''}}</span>
        </template>
        <template slot="endDate" slot-scope="text">
          <span>{{text?moment(text).format('YYYY-MM-DD'):''}}</span>
        </template>
      </a-table>
      <BurtPagination :pagination="{ ...cusPager, total: cusTotal }" @pageChange="onCustomChange" />
    </div>
    <div v-if="isShowCoverageData">
      <PolicyInfo :policyData="coverageForm" />
      <coverages :formData="coverageForm"></coverages>
    </div>
  </div>
</template>

<script>
import BurtPagination from "@/components/CUSTOMER/pagation";
import coverages from "./components/coverages";
import PolicyInfo from "./components/PolicyInfo";
import moment from "moment";
import mixins from "@/mixins";
export default {
  beforeRouteUpdate(to, from, next) {
    this.handlerReset();
    next();
  },
  components: {
    BurtPagination,
    coverages,
    PolicyInfo,
  },
  mixins: [mixins],
  data() {
    const customColumns = [
      { title: "病历号", dataIndex: "mrnNo", width: 180 },
      { title: "客户姓名", dataIndex: "patientName", width: 120 },
      { title: "出生日期", dataIndex: "birthday", width: 180, scopedSlots: { customRender: "birthday" } },
      { title: "性别", dataIndex: "sex", width: 80, scopedSlots: { customRender: "sex"  } },
      { title: "保险公司", dataIndex: "payorName", width: 180 },
      { title: "保单号码", dataIndex: "policyNo", width: 190 },
      { title: "保险有效日期", dataIndex: "startDate", scopedSlots: { customRender: "startDate" }, width: 180 },
      { title: "保险终止日期", dataIndex: "endDate", scopedSlots: { customRender: "endDate" }, width: 180 },
    ];
    return {
      isShowCoverageData: false,
      customColumns,
      form: {
        mrnNo: undefined,
        patientName: undefined,
        birthday: undefined,
        sex: undefined,
        idNo: undefined,
        payorId: undefined,
      },
      detailForm: {},
      coverageForm: {},
      customList: [],
      companyCode: [],
      // corpCode: [],
      // planCode: [],
      queryForm: {},
      cusPager: {
        pageNum: 1,
        pageSize: 10,
      },
      cusTotal: 0,
    };
  },
  mounted() {
    if (this.$route.query && this.$route.query.id) {
      this.detailForm = this.$route.query;
      this.getCustomerDetail();
    }
    this._getPayorCode();
  },
  methods: {
    moment,
    onCustomChange(pager) {
      const { pageNum } = pager;
      // console.log(pager);
      this.cusPager.pageNum = pageNum;
      this._getCustomerList();
    },
    onCustomSizeChange(e) {
      e && e.stopPropagation();
      const val = e.target.value * 1;
      if (!val || val < 0) {
        return false;
      }
      this.cusPager.pageSize = val;
      this._getCustomerList();
    },
    handlerRowClick(record) {
      const { id, patientPolicyId } = record;
      return {
        on: {
          click: () => {
            this.detailForm = { id, patientPolicyId };
            this.getCustomerDetail();
          },
        },
      };
    },
    getCustomerDetail() {
      // this.queryForm = this.$lodash.cloneDeep(this.form);
      const { id, patientPolicyId } = this.detailForm;
      const data = {
        id: id && id * 1,
        patientPolicyId: patientPolicyId * 1,
      };
      this.$apis.GETCUSTOMERDETAIL(data).then((res) => {
        if (res.returnCode === "0000") {
          const data = res.content || {};
          for (let i in this.form) {
            this.form[i] = data[i];
          }
          this.customList = [];
          this.coverageForm = res.content || {};
          this.isShowCoverageData = true;
          // this._getCorporateCode(this.coverageForm.payorId);
          // this._getPlanCode(this.coverageForm.corpId);
        }
        // this.dataList = (res.content && res.content.list) || [];
        // this.total = (res.content && res.content.total) || 0;
      });
    },
    handlerReset() {
      this.$refs.form.resetFields();
      this.customList = [];
      this.isShowCoverageData = false;
      this.coverageForm = {};
    },
    handlerSearch() {
      console.log(this.$refs.form.validate);
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return false;
        }
        this.cusPager.pageNum = 1;
        this.queryForm = this.$lodash.cloneDeep(this.form);
        this._getCustomerList();
      });
    },
    payorChange(val) {
      this.form.corpName = undefined;
      this.form.planName = undefined;
      if (!val) {
        return false;
      }
      this._getCorporateCode(val);
    },
    corpChange(val) {
      // 因为接口要name  但是查计划要用id
      this.form.planName = undefined;
      if (!val) {
        return false;
      }
      console.log(val);
      this.form.corpName = val.split("$_")[1];
      val = val.split("$_")[0];
      this._getPlanCode(val);
    },
    // 选择框筛选
    filterCode(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    _getPayorCode() {
      this.$apis.GETPAYORCODE({}).then((res) => {
        this.companyCode = res.content || [];
      });
    },
    _getCorporateCode(val) {
      this.$apis.GETCORPORATECODEBYPAYOR({
          longName: "",
          payorId: val,
        }).then((res) => {
          this.corpCode = res.content || [];
        });
    },
    _getPlanCode(val) {
      this.$apis.GETPLANCODEBYCORP({
          longName: "",
          corpId: val,
        }).then((res) => {
          this.planCode = res.content || [];
        });
    },
    _getCustomerList() {
      const data = {
        ...this.queryForm,
        ...this.cusPager,
      };
      this.$apis.GETCUSTOMERLIST(data).then((res) => {
        this.customList = (res.content && res.content.list) || [];
        this.cusTotal = (res.content && res.content.total) || 0;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.welfare {
  .pa(30, 36, 50, 39);
  background-color: #fff;
  .none-label {
    text-align: right;
  }
  .classify {
    .pa(10, 20, 10, 20);
    .mg-t(10);
    .mg-b(10);
    background-color: #f8fafb;
    .ant-btn:not(:first-child) {
      .mg-l(30);
    }
    .save-btn {
      float: right;
    }
  }
  .icon-class {
    .mg-r(10);
  }
}
/deep/.ant-collapse-item {
  border: none !important;

  .ant-collapse-header {
    font-weight: bold;
    background-color: #f8fafb;
  }
  .ant-collapse-content {
    background-color: #fff !important;
    .ant-collapse-content-box {
      padding: 0;
    }
  }
}
</style>
