<template>
  <div class="white_bg burt-container">
    <a-form-model ref="form" layout="vertical" :model="detailObj" :rules="formRules">
      <a-row :gutter="30">
        <a-col :lg="8" :sm="12">
          <a-form-model-item label="医疗机构名称" prop="longName">
            <a-input v-model="detailObj.longName" placeholder="医疗机构名称" />
          </a-form-model-item>
        </a-col>
        <a-col :lg="8" :sm="12">
          <a-form-model-item label="医疗机构英文名" prop="englishName">
            <a-input v-model="detailObj.englishName" placeholder="医疗机构英文名" />
          </a-form-model-item>
        </a-col>
        <a-col :lg="8" :sm="12">
          <a-form-model-item label="联系电话" prop="telNo1">
            <a-input v-model="detailObj.telNo1" placeholder="请输入联系电话" />
          </a-form-model-item>
        </a-col>
        <a-col :lg="10" :sm="12">
          <a-form-model-item label="诊所地址（中文）" prop="address">
            <a-input v-model="detailObj.address" placeholder="诊所地址（中文）" />
          </a-form-model-item>
        </a-col>
        <a-col :lg="10" :sm="12">
          <a-form-model-item label="诊所地址（英文）">
            <a-input v-model="detailObj.englishAddr" placeholder="诊所地址（英文）" />
          </a-form-model-item>
        </a-col>
        <a-col :sm="12">
          <a-form-model-item label="营业时间">
            <a-textarea v-model="detailObj.businessHours" placeholder="请输入营业时间" :auto-size="{ minRows: 3, maxRows: 5 }" />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <div class="title-div">账户信息-人民币账户</div>
    <a-form-model layout="vertical">
      <a-row :gutter="30">
        <a-col :lg="8" :sm="12">
          <a-form-model-item label="账户名称">
            <a-input v-model="detailObj.accountName" placeholder="账户名称" />
          </a-form-model-item>
        </a-col>
        <a-col :lg="6" :sm="12">
          <a-form-model-item label="银行名称">
            <a-input v-model="detailObj.bankName" placeholder="银行名称" />
          </a-form-model-item>
        </a-col>
        <a-col :lg="8" :sm="12">
          <a-form-model-item label="银行账号">
            <a-input v-model="detailObj.bankAccount" type="number" placeholder="银行账号" />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <div class="title-div">财务信息-美金币账户</div>
    <a-form-model layout="vertical">
      <a-row :gutter="30">
        <a-col :lg="8" :sm="12">
          <a-form-model-item label="Beneficiary账户名称">
            <a-input v-model="detailObj.accountNameEng" placeholder="Beneficiary账户名称" />
          </a-form-model-item>
        </a-col>
        <a-col :lg="6" :sm="12">
          <a-form-model-item label="Bank Account No 银行账号">
            <a-input v-model="detailObj.bankAccountEng" placeholder="Bank Account No 银行账号"/>
          </a-form-model-item>
        </a-col>
        <a-col :lg="8" :sm="12">
          <a-form-model-item label="Bank Name 银行名称">
            <a-input v-model="detailObj.bankAddrEng" placeholder="Bank Name 银行名称" />
          </a-form-model-item>
        </a-col>
        <a-col :sm="12">
          <a-form-model-item label="Bank Address 银行地址">
            <a-input v-model="detailObj.bankAddr" placeholder="Bank Address 银行地址"/>
          </a-form-model-item>
        </a-col>
        <a-col :sm="12">
          <a-form-model-item label="Swift Code 国际电汇代码">
            <a-input v-model="detailObj.telegraphicTransferCode" placeholder="Swift Code 国际电汇代码" />
          </a-form-model-item>
        </a-col>
        <a-col :sm="24" class="none-label">
          <a-form-model-item label="button">
            <a-button type="primary" @click="saveEvt">
              <Icon name="ssibaocun" :size="14" />保存
            </a-button>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <!-- 暂时不用 -->
    <a-tabs type="card" v-model="activeKey" @change="paneChange">
        <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title">
            <component v-if="detailObj.id && pane.show" :detailObj="detailObj" :is="pane.content"></component>
        </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import InfoDoctor from './components/infoDoctor';
import InfoSpecial from './components/infoSpecial';
export default {
  data() {
    return {
      detailObj: {}, //详细信息
      formRules: {   
        longName: [{ required: true, message: "请输入医疗机构名称", trigger: "blur" }],
        englishName: [{ required: true, message: "请输入医疗机构英文名", trigger: "blur" }],
        telNo1: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
        address: [{ required: true, message: "请输入诊所地址（中文）", trigger: "blur" }]
      },
      activeKey: '0',
      panes: [
        {
            title: "医生信息",
            key: '0',
            content: 'InfoDoctor',
            show: true
        },{
            title: "科室管理",
            key: '1',
            content: 'InfoSpecial',
            show: false
        },
      ]
    };
  },
  components: {
    InfoDoctor, InfoSpecial
  },
  async created() {
    this.getDetail();
  },
  methods: {
    paneChange(){
      this.panes.forEach((item)=>{
          item.show = false;
      });
      this.panes[Number(this.activeKey)].show = true;
    },
    //获取详细信息
    getDetail() {
      return new Promise((resolve, reject) => {
        this.$apis.providerDetail().then((res) => {
          if (res.returnCode == "0000") {
            this.detailObj = res.content || {};
            resolve();
          } else {
            this.$message.error(res.returnMsg);
            reject();
          }
        });
      });
    },
    //保存
    saveEvt(){
      this.$refs.form.validate((valid) => {
        if(valid){
          this.$apis.providerUpdate({...this.detailObj})
          .then((res) => {
            if (res.returnCode == "0000") {
              this.$message.success("保存成功");
            } else {
              this.$message.error(res.returnMsg);
            }
          });
        }
      });
    },
    
  },
};
</script>

<style lang="less" scoped>
.ant-form {
  margin-top: 30px;
}
.title-div {
  line-height: 56px;
  color: #252631;
  font-weight: bold;
  border-bottom: 1px solid #eee;
}
.upload-div {
  height: 60px;
  background: #f8fafb;
  padding-left: 20px;
  margin-bottom: 30px;
}
</style>