<template>
  <div id="editExpendMx">
    <el-card style="position: relative;">
      <span>基本信息</span>
      <el-form :model="basicForm" :rules="basicRules" ref="basic" label-width="auto" :show-message="false">
        <el-row :gutter="10">

          <el-col :span="1.5">
            <el-form-item label="编码" prop="code">
              <el-input style="width: 200px" clearable disabled size="mini" v-model="basicForm.code">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="1.5">
            <el-form-item label="服务费合计" prop="serviceFee">
              <el-input style="width: 200px" clearable disabled size="mini" v-model="publishedBooksMessage">
              <!-- <el-input style="width: 200px" clearable disabled size="mini" v-model="basicForm.serviceFee"> -->
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="1.5">
            <el-form-item label="医院编码" prop="custCode">
              <el-input style="width: 200px" clearable :disabled="sonDisable" size="mini" v-model="basicForm.custCode">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="1.5">
            <el-form-item label="医院名称" prop="custName">
              <el-input style="width: 200px" clearable :disabled="sonDisable" size="mini" v-model="basicForm.custName">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="1.5">
            <el-form-item label="供应商编码" prop="supplierCode">
              <el-input style="width: 200px" clearable :disabled="sonDisable" size="mini" v-model="basicForm.supplierCode">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="1.5">
            <el-form-item label="供应商名称" prop="supplierName">
              <el-input style="width: 200px" clearable :disabled="sonDisable" size="mini" v-model="basicForm.supplierName">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="1.5">
            <el-form-item label="结算单号" prop="settleNo">
              <el-input style="width: 200px" clearable :disabled="sonDisable" size="mini" v-model="basicForm.settleNo">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="1.5">
            <el-form-item label="结算开始日期" prop="startDate">
              <el-date-picker
                v-model="basicForm.startDate"
                :disabled="sonDisable"
                clearable
                type="date"
                value-format="yyyy-MM-dd"
                size="mini"
                style="width: 200px"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="1.5">
            <el-form-item label="结算截止日期" prop="endDate">
              <el-date-picker
                v-model="basicForm.endDate"
                :disabled="sonDisable"
                clearable
                type="date"
                value-format="yyyy-MM-dd"
                size="mini"
                style="width: 200px"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="1.5">
            <el-form-item label="合计金额" prop="totalAmount">
              <el-input style="width: 200px" clearable disabled size="mini" v-model="publishedBooksMessage2">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="1.5">
            <el-form-item label="是否汇总" prop="isSum">
              <el-select style="width: 200px" size="mini" :disabled="sonDisable" clearable v-model="basicForm.isSum" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="1.5">
            <el-form-item label="备注" prop="remark">
              <el-input style="width: 200px" clearable :disabled="sonDisable" size="mini" v-model="basicForm.remark">
              </el-input>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>

      <div class="btn_group">
        <!-- <el-button type="primary" size="mini"  @click="toOA" v-if="sonPageStu == 'check'">提交</el-button> -->
        <el-button type="primary" size="mini"  @click="editPage" v-if="sonPageStu == 'check'">编辑</el-button>
        <el-button type="primary" size="mini"  @click="save" v-if="sonPageStu == 'add' || sonPageStu == 'edit'">保存</el-button>
        <el-button size="mini" plain @click="back">返回</el-button>
      </div>

      <div class="btn_grooup">
        <span>明细信息</span>
        <div>
          <!-- <el-button type="primary" size="mini" @click="addLine" v-if="!sonDisable">增行</el-button> -->
          <!-- <el-button type="primary" size="mini" @click="delLines" v-if="!sonDisable">删行</el-button> -->
        </div>
      </div>

      <ux-grid
        :data="basicForm.itemList"
        border
        :cell-style="{ borderColor: '#c0c0c0' }"
        :header-cell-style="{ borderColor: '#c0c0c0' }"
        class="exporttable"
        height="410"
        max-height="410"
        style="font-size: 12px;"
        @selection-change="handleSelectionChange"
        ref="table"
        show-header-overflow="tooltip"
        show-overflow="tooltip"
        keep-source
        beautifyTable
        :checkbox-config="{highlight: true, trigger: 'row'}"
        :edit-config="{trigger: 'click', mode: 'row'}">
      >
        <ux-table-column resizable type="checkbox" width="50px" fixed="left"/>
        <ux-table-column resizable title="医保编码" field="healthCode" align="center"/>
        <ux-table-column resizable title="物料编码" field="itemCode" align="center"/>
        <ux-table-column resizable title="物料名称" field="itemName" align="center"/>
        <ux-table-column resizable title="规格型号" field="itemSpec" align="center"/>
        <ux-table-column resizable title="厂家" field="manufactor" align="center"/>
        <ux-table-column resizable title="单位" field="itemUom" align="center"/>
        <ux-table-column resizable title="是否带量" field="isWhether" align="center" :formatter="hangStatus" />
        <ux-table-column resizable title="服务费率(%)" field="ratio" align="center" edit-render>
          <template v-slot:edit="scope">
            <el-input-number clearable :disabled="sonDisable" :min="1" size="mini" v-model="scope.row.ratio" @input="changeFei(scope.rowIndex, scope.row)"/>
          </template>
        </ux-table-column>
        <ux-table-column resizable title="数量" field="qty" align="center"/>
        <ux-table-column resizable title="单价" field="price" align="center"/>
        <ux-table-column resizable title="小计" field="amount" align="center"/>
        <ux-table-column resizable title="备注" field="detailRemark" align="center"/>
        <ux-table-column resizable title="服务费" field="serviceFee" align="center"/>
      </ux-grid>
    </el-card>
  </div>
</template>

<script>
import { Mxdetail, editSaveMx, toOAs } from '@/api/expend/expendMx.js'
export default {
  props: ['pageStu','row', 'disable'],
  model: {
    prop: 'isList',
    event: 'jugislist'
  },
  data() {
    return {
      // 不能直接改变props传来的值
      sonPageStu: this.pageStu,
      sonDisable: this.disable,
      basicForm: {
        id: '',
        code: '',
        serviceFee: 0,
        custCode: '',
        custName: '',
        supplierCode: '',
        supplierName: '',
        settleNo: '',
        startDate: '',
        endDate: '',
        totalAmount: '',
        isSum: '',
        remark: '',
        itemList: []
      },
      options: [{value: '0', label: '是'}, {value: '2', label: '否'}],
      basicRules: {},
      ids:[],
    }
  },
  created() {
    if(this.pageStu == 'check') {
      console.log('数据', this.row)
      this.getDetails(this.row)
    } else if(this.pageStu == 'edit') {
      this.getDetails(this.row)
    } else if (this.pageStu == 'add') {

    }
  },
  computed: {
    // 一个计算属性的 getter
    publishedBooksMessage() {
      // `this` 指向当前组件实例
      // var s = 0
      this.basicForm.serviceFee = 0
      this.basicForm.itemList.forEach(item => {
        this.basicForm.serviceFee += Number(item.serviceFee)
      })
      return this.basicForm.serviceFee
    },
      publishedBooksMessage2() {
      // `this` 指向当前组件实例
      // var s = 0
      this.basicForm.totalAmount = 0
      this.basicForm.itemList.forEach(item => {
        this.basicForm.totalAmount += Number(item.amount)
      })
      return this.basicForm.totalAmount
    }
  },
  methods: {
    getDetails(row) {
      Mxdetail(row.id).then(res => {
        if (res.code === 200) {
          this.basicForm = res.data
        }
      })
    },
    editPage() {
      this.sonPageStu = 'edit'
      this.sonDisable = false
    },
    save() {
      editSaveMx(this.basicForm).then(res => {
        if(res.code === 200) {
          this.$modal.notifySuccess("编辑保存成功");
          this.sonPageStu = 'check'
          this.sonDisable = true
          this.getDetails(this.row)
        }
      })
    },
    back() {
      this.$emit('jugislist', true)
      this.$emit('refresh')
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item =>{
        return item.id
      })
      console.log('选中数组', this.ids)
    },
    addLine() {},
    delLines() {},
    toOA() {
      this.$modal.loading("正在提交，请稍后...");
      toOAs(this.basicForm).then(res => {
        if (res.code === 200) {
          this.$modal.closeLoading();
          this.$modal.notifySuccess(res.msg);
          this.back()
        }
      }).catch(err => {
        this.$modal.closeLoading();
      })
    },
    changeFei(index, row) {
      console.log(index)
      console.log(row)
      row.serviceFee = ((row.ratio*0.01) * row.amount).toFixed(2)
      // this.basicForm.serviceFee = this.basicForm.itemList.map(item => {
      //   return item.serviceFee += item.serviceFee
      // })
    },
    hangStatus(row) {
      switch (row.row.isWhether) {
        case "0":
          return "否";
        case "":
          return "否";
        case "1":
          return "是";
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.btn_group {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 10px;right: 20px;

}
.btn_grooup {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
</style>