<template>
  <div class="custom-info">
    <!-- form -->
    <a-form-model ref="form" layout="vertical" :model="form">
      <a-row :gutter="30">
        <a-col :xl="5" :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="5" :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="4" :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">
                {{ item.longName }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xl="5" :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="24" :lg="18" :sm="12" class="none-label">
          <a-form-model-item label="button">
            <a-button type="primary"
              ><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="pagination"
      @change="onChange"
    >
      <template slot="operation" slot-scope="">
        <a-button type="link">修改</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>
  </div>
</template>

<script>
export default {
  data() {
    const columns = [
      { title: "病历号", dataIndex: "mrnNo", ellipsis: true, width: 180 },
      {
        title: "客户姓名",
        dataIndex: "patientName",
        ellipsis: true,
        width: 120,
      },
      { title: "出生日期", dataIndex: "birthday", ellipsis: true, width: 180 },
      { title: "性别", dataIndex: "sex", ellipsis: true, width: 80 },
      { title: "保险公司", dataIndex: "payorName", ellipsis: true, width: 180 },
      { title: "保单号码", dataIndex: "policyNo", ellipsis: true, width: 190 },
      {
        title: "保险有效日期",
        dataIndex: "startDate",
        ellipsis: true,
        width: 180,
      },
      {
        title: "保险终止日期",
        dataIndex: "endDate",
        ellipsis: true,
        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,
    };
  },
  created() {
    this._getCustomerList();
    this._getCorporateCode();
  },
  computed: {
    pagination() {
      // if (!this.pager || !this.dataList.length) {
      //   return false;
      // }
      const { pageNum, pageSize } = this.pager;
      const pages = Math.ceil(this.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;
            }
            // originalElement.children = undefined;
            // originalElement.text = `${current} / ${pages}`;
            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={this.onShowSizeChange}
                  class="size-change"
                ></a-input-number>
              </div>
            );
          }
          return originalElement;
        },
        onChange: (pager) => this.onChange(pager),
      };
    },
  },
  methods: {
    onChange(pager) {
      const { current } = pager;
      // console.log(pager);
      this.pager.pageNum = current;
      this._getCustomerList();
    },
    onShowSizeChange(e) {
      e && e.stopPropagation();
      const val = e.target.value * 1;
      if (!val || val < 0) {
        return false;
      }
      this.pager.pageSize = val;
      this._getCustomerList();
    },
    handlerSearch() {
      console.log(this.$refs.form.validate);
      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("删除成功");
    },
    _getCorporateCode() {
      const params = {
        longName: "",
        payorId: 0,
      };
      this.$apis.GETCORPORATECODE(params).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.total = (res.content && res.content.total) || 0;
      });
    },
  },
};
</script>
<style lang="less" scoped>
.none-label {
  text-align: right;
  .ant-form-item-label {
    opacity: 0;
  }
}
.current-page {
  color: #4d7cfe;
}
.size-change {
  .w(107);
  .mg-l(40);
  background-color: #f8fafb;
  border: none;
}
.ant-btn .icon-class {
  .mg-r(10);
}
.success.ant-btn-link {
  color: #4cd964;
}
.danger.ant-btn-link {
  color: #ff3b30;
}
</style>
