<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="请输入病历号"></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="请输入客户姓名"
            ></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="请选择出生日期"
            ></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="请选择保险公司">
              <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="请输入保单号码"
            ></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-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>

    <!-- table -->
    <a-table
      :columns="columns"
      :data-source="dataList"
      row-key="mrnNo"
      :scroll="{ x: true }"
      :pagination="false"
      :customRow="handlerRowClick"
    >
      <template slot="operation" slot-scope="record">
        <a-button
          v-if="record.isEdit"
          type="link"
          @click.stop="saveChange(record)"
          >保存</a-button
        >
        <a-button v-else type="link" @click.stop="changeDataStatus(record)"
          >修改</a-button
        >
        <a-button type="link" class="success">新增</a-button>
        <a-popconfirm
          title="你确定要关闭吗？"
          ok-text="确定"
          cancel-text="取消"
          @confirm="deleteData"
        >
          <a-button type="link" class="danger">删除</a-button>
        </a-popconfirm>
      </template>
    </a-table>
    <!--分页-->
    <BurtPagination :pagination="pager" @pageChange="_getCustomerList" />
  </div>
</template>

<script>
import BurtPagination from "@/components/CUSTOMER/pagation";
export default {
  data() {
    const columns = [
      {
        title: "病历号",
        dataIndex: "mrnNo",
        width: 180,
        customRender: (val, row) => {
          if (row.isEdit) {
            return <a-input v-model={row.mrnNo}></a-input>;
          }
          return val;
        },
      },
      {
        title: "客户姓名",
        dataIndex: "patientName",
        width: 120,
        customRender: (val, row) => {
          if (row.isEdit) {
            return <a-input v-model={row.patientName}></a-input>;
          }
          return val;
        },
      },
      { 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 },
      {
        title: "操作",
        key: "operation",
        width: "175px",
        fixed: "right",
        scopedSlots: { customRender: "operation" },
      },
    ];
    return {
      columns,
      form: {},
      pageForm: {},
      companyCode: [],
      dataList: [],
      pager: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
    };
  },
  components: {
    BurtPagination
  },
  created() {
    this._getCustomerList();
    this._getPayorCode();
  },
  methods: {
    handlerRowClick(record) {
      const { id, patientPolicyId } = record;
      return {
        style: {
          color: record.isEdit ? "#2B63FF" : "#252631",
        },
        on: {
          click: () => {
            if (record.isEdit) {
              return true;
            }
            this.$router.push({
              name: "welfare",
              query: { id, patientPolicyId },
            });
          },
        },
      };
    },
    // 修改按钮
    changeDataStatus(record) {
      this.$set(record, "isEdit", true);
    },
    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();
      });
    },
    deleteData() {
      this.$message.success("删除成功");
    },
    // 新建客户信息
    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.dataList = (res.content && res.content.list) || [];
        this.pager.total = (res.content && res.content.total) || 0;
      });
    },
  },
};
</script>
<style lang="less" scoped>
.none-label {
  text-align: right;
  .ant-form-item-label {
    opacity: 0;
  }
}
.ant-btn .icon-class {
  .mg-r(10);
}
</style>