<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="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"
            ></a-date-picker>
          </a-form-model-item>
        </a-col>
        <a-col :xl="4" :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="7" :lg="6" :sm="12">
          <a-form-model-item label="客户公司名称" prop="corpName">
            <a-select
              v-model="form.corpName"
              placeholder="请选择客户公司名称"
              show-search
              allow-clear
              @filterOption="filterCode"
              @change="corpChange"
            >
              <a-select-option
                v-for="item in corpCode"
                :key="item.id"
                :value="item.id + '$_' + item.longName"
              >
                {{ 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="保单卡号" prop="policyNo">
            <a-input
              v-model="form.policyNo"
              allow-clear
              placeholder="请输入保单卡号"
            ></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :xl="4" :lg="6" :sm="12">
          <a-form-model-item label="首次入保时间" prop="firstEnrollmentTime">
            <a-date-picker
              v-model="form.firstEnrollmentTime"
              placeholder="请选择首次入保时间"
              value-format="YYYY-MM-DD"
            ></a-date-picker>
          </a-form-model-item>
        </a-col>
        <a-col :xl="4" :lg="6" :sm="12">
          <a-form-model-item label="保单生效日期" prop="startDate">
            <a-date-picker
              v-model="form.startDate"
              placeholder="请选择保单生效日期"
              value-format="YYYY-MM-DD"
            ></a-date-picker>
          </a-form-model-item>
        </a-col>
        <a-col :xl="4" :lg="6" :sm="12">
          <a-form-model-item label="保单终止日期" prop="endDate">
            <a-date-picker
              v-model="form.endDate"
              placeholder="请选择保单终止日期"
              value-format="YYYY-MM-DD"
            ></a-date-picker>
          </a-form-model-item>
        </a-col>
        <a-col :xl="6" :lg="6" :sm="12">
          <a-form-model-item label="保险计划" prop="planName">
            <a-select
              v-model="form.planName"
              placeholder="请选择保险计划"
              show-search
              allow-clear
              @filterOption="filterCode"
            >
              <a-select-option
                v-for="item in planCode"
                :key="item.id"
                :vlaue="item.longName"
              >
                {{ 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="其他备注" prop="remark">
            <a-input
              v-model="form.remark"
              allow-clear
              placeholder="请输入备注信息"
            ></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :xl="4" :lg="6" :sm="12">
          <a-form-model-item label="等待期" prop="waitingPeriod">
            <a-radio-group
              v-model="form.waitingPeriod"
              :default-value="form.waitingPeriod"
              button-style="solid"
            >
              <a-radio-button value="Y"> 是 </a-radio-button>
              <a-radio-button class="mar-left10" value="N"> 否 </a-radio-button>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :xl="4" :lg="6" :sm="12">
          <a-form-model-item label="等待期时间" prop="waitingPeriodTime">
            <a-date-picker
              v-model="form.waitingPeriodTime"
              placeholder="请选择等待期时间"
              value-format="YYYY-MM-DD"
            ></a-date-picker>
          </a-form-model-item>
        </a-col>
        <a-col :xl="4" :lg="6" :sm="12">
          <a-form-model-item label="是否承担既往症" prop="isUndertakeAnamnesis">
            <a-radio-group
              v-model="form.isUndertakeAnamnesis"
              :default-value="form.isUndertakeAnamnesis"
              button-style="solid"
            >
              <a-radio-button value="Y"> 是 </a-radio-button>
              <a-radio-button class="mar-left10" value="N"> 否 </a-radio-button>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :xl="6" :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>
    <a-table
      v-if="customList && customList.length"
      :columns="customColumns"
      :data-source="customList"
      row-key="mrnNo"
      :scroll="{ x: true }"
      :pagination="cusPagination"
      :customRow="handlerRowClick"
      @change="onCustomChange"
    ></a-table>
    <coverages
      :coverageForm="coverageForm"
      v-if="isShowCoverageData"
    ></coverages>
  </div>
</template>

<script>
import coverages from "./components/coverages";
export default {
  components: {
    coverages,
  },
  data() {
    const customColumns = [
      { title: "病历号", dataIndex: "mrnNo", width: 180 },
      { title: "客户姓名", dataIndex: "patientName", width: 120 },
      { title: "出生日期", dataIndex: "birthday", width: 180 },
      { title: "性别", dataIndex: "sex", width: 80 },
      { title: "保险公司", dataIndex: "payorName", width: 180 },
      { title: "保单号码", dataIndex: "policyNo", width: 190 },
      { title: "保险有效日期", dataIndex: "startDate", width: 180 },
      { title: "保险终止日期", dataIndex: "endDate", width: 180 },
    ];
    return {
      isShowCoverageData: false,
      customColumns,
      form: {
        patientName: undefined,
        payorId: undefined,
        corpName: undefined,
        planName: undefined,
        birthday: undefined,
        policyNo: undefined,
        firstEnrollmentTime: undefined,
        startDate: undefined,
        endDate: undefined,
        remark: undefined,
        waitingPeriod: "N",
        isUndertakeAnamnesis: "N",
      },
      detailForm: {},
      coverageForm: {},
      customList: [],
      companyCode: [],
      corpCode: [],
      planCode: [],
      queryForm: {},
      cusPager: {
        pageNum: 1,
        pageSize: 10,
      },
      cusTotal: 0,
    };
  },
  computed: {
    cusPagination() {
      return this.initPageConfig(
        { ...this.cusPager, total: this.cusTotal },
        this.onCustomSizeChange
      );
    },
  },
  mounted() {
    if (this.$route.query && this.$route.query.id) {
      console.log(this.$route);
      this.detailForm = this.$route.query;
      this.getCustomerDetail();
    }
    this._getPayorCode();
  },
  methods: {
    initPageConfig(pager, sizeChange) {
      const { pageNum, pageSize, total } = pager;
      const pages = Math.ceil(total / pageSize);
      return {
        current: pageNum,
        pageSize,
        size: "large",
        position: "bottom",
        align: "right",
        total: this.total,
        hideOnSinglePage: false,
        itemRender: (current, type, originalElement) => {
          if (type === "prev") {
            originalElement.children = undefined;
            originalElement.text = "上一页";
          }
          if (type === "page") {
            if (current !== pageNum) {
              return undefined;
            }
            return (
              <p>
                <span class="current-page">{current}</span> / {pages}
              </p>
            );
          }
          if (type === "next") {
            originalElement.children = undefined;
            originalElement.text = "下一页";
            return (
              <div>
                {originalElement}
                <a-input-number
                  onblur={sizeChange}
                  class="size-change"
                ></a-input-number>
              </div>
            );
          }
          return originalElement;
        },
      };
    },
    onCustomChange(pager) {
      const { current } = pager;
      // console.log(pager);
      this.cusPager.pageNum = current;
      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.coverageForm = res.content || {};
          this.isShowCoverageData = true;
        }
        // this.dataList = (res.content && res.content.list) || [];
        // this.total = (res.content && res.content.total) || 0;
      });
    },
    handlerReset() {
      this.$refs.form.resetFields();
    },
    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);
  }
}
</style>