<template>
  <div>
    <!-- 发放弹窗 -->
    <el-dialog :title="$t('page.business.resource.gyzj.fafang')" :visible.sync="open" width="1200px" append-to-body
      :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px" v-if="open">
        <div class="sbzdtcma"> <input type="text"> <input type="password"> </div>
        <div :style="isBatch ? 'display:block' : 'display:none'">
          <el-row style="margin:10px 0px;">
            <el-col :span="24">
              <el-table :data="selectList" border>
                <el-table-column :label="$t('page.business.resource.gyzj.mc')" align="left" prop="mc"
                  :show-overflow-tooltip="true" width="100px" />
                <el-table-column :label="$t('page.business.resource.gyzj.bh')" align="left" prop="bh"
                  :show-overflow-tooltip="true" width="100px" />
                <el-table-column :label="$t('page.business.resource.gyzj.nd')" align="center">
                  <template slot-scope="scope">
                    {{ scope.row.nd }}{{ scope.row.nddw }}
                  </template>
                </el-table-column>
                <el-table-column :label="$t('page.business.resource.gyzj.sxrq')" align="center" prop="sxrq"
                  width="150px" />
                <el-table-column :label="$t('page.business.resource.gyzj.cctj')" align="center" prop="cctj"
                  width="130px" />
                <el-table-column :label="$t('page.business.resource.gyzj.ccwz')" align="center" prop="ccwz"
                  width="130px" />
                <el-table-column :label="$t('page.business.resource.gyzj.ckl')" align="center">
                  <template slot-scope="scope">
                    {{ scope.row.kc }}{{ scope.row.kcdw }}
                  </template>
                </el-table-column>
                <el-table-column :label="$t('page.business.resource.gyzj.zytj')" align="center" width="250px">
                  <template slot-scope="scope">
                    <BusinessSelect v-model="scope.row.zytj" dictType="business_zytj"></BusinessSelect>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('page.business.resource.gyzj.md')" align="center" width="250px">
                  <template slot-scope="scope">
                    <SelectStudy v-model="scope.row.mdIds" :selectkey="scope.row.id + ''"
                      @change="selectStudyChangeBatch" />
                  </template>
                </el-table-column>
                <el-table-column :label="$t('page.business.resource.gyzj.ckmz')" align="center" width="250px">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.ckmz" maxlength="50" > <template slot="append">{{
                      scope.row.kcdw
                    }}</template>
                    </el-input>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('form.remark')" align="center" width="250px">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.remark" maxlength="50"
                      :placeholder="$t('form.placeholderInput')" />
                  </template>
                </el-table-column>
                <el-table-column :label="$t('form.operate')" align="center" width="100px" fixed="right">
                  <template slot-scope="scope">
                    <el-button type="text" @click="handleSc(scope.row)">{{
                      $t('form.delete') }}</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </div>
        <div v-if="!isBatch">
          <el-row>
            <el-col :span="12">
              <el-form-item :label="$t('page.business.resource.gyzj.mc')">
                <el-input type="text" v-model="form.mc" maxlength="50" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('page.business.resource.gyzj.bh')">
                <el-input type="text" v-model="form.bh" maxlength="50" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item :label="$t('page.business.resource.gyzj.sxrq')">
                <el-input type="text" v-model="form.sxrq" maxlength="50" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('page.business.resource.gyzj.nd')">
                <el-input type="text" v-model="form.nd" maxlength="50" disabled> <template slot="append">{{ form.nddw
                }}</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item :label="$t('page.business.resource.gyzj.cctj')">
                <el-input type="text" v-model="form.cctj" maxlength="50" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('page.business.resource.gyzj.ccwz')">
                <el-input type="text" v-model="form.ccwz" maxlength="50" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item :label="$t('page.business.resource.gyzj.ckl')">
                <el-input type="text" v-model="form.ckl" maxlength="50" disabled> <template slot="append">{{ form.ckldw
                }}</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('page.business.resource.gyzj.zytj')" prop="zytj">
                <BusinessSelect v-model="form.zytj" dictType="business_zytj"></BusinessSelect>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item :label="$t('page.business.resource.gyzj.md')" prop="mdIds">
                <SelectStudy v-model="form.mdIds" @change="selectStudyChange" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('page.business.resource.gyzj.ckmz')" prop="ckmz">
                <el-input type="text" v-model="form.ckmz" maxlength="50" > <template slot="append">{{ form.ckldw
                }}</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item :label="$t('form.remark')" prop="remark">
                <el-input type="textarea" v-model="form.remark" :rows="5" maxlength="500"
                  :placeholder="$t('form.placeholderInput')">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('page.business.resource.gyzj.lqr1')" prop="lqr1Id">
              <SelectDeptUser v-model="form.lqr1Id" key="lqr1Id" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('page.business.resource.gyzj.lqr1') + $t('form.password')" prop="lqr1mm">
              <el-input type="password" v-model="form.lqr1mm" maxlength="20"
                :placeholder="$t('form.placeholderInput')" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('page.business.resource.gyzj.lqr2')" prop="lqr2Id">
              <SelectDeptUser v-model="form.lqr2Id" key="lqr2Id" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('page.business.resource.gyzj.lqr2') + $t('form.password')" prop="lqr2mm">
              <el-input type="password" v-model="form.lqr2mm" maxlength="20"
                :placeholder="$t('form.placeholderInput')" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('page.business.resource.gyzj.ffr1')">
              <el-input type="text" v-model="nickName" maxlength="50" :placeholder="$t('form.placeholderInput')"
                disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('page.business.resource.gyzj.ffr1') + $t('form.password')" prop="ffr1mm">
              <el-input type="password" v-model="form.ffr1mm" maxlength="20"
                :placeholder="$t('form.placeholderInput')" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('page.business.resource.gyzj.ffr2')" prop="ffr2Id">
              <SelectDeptUser v-model="form.ffr2Id" key="ffr2Id" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('page.business.resource.gyzj.ffr2') + $t('form.password')" prop="ffr2mm">
              <el-input type="password" v-model="form.ffr2mm" maxlength="20"
                :placeholder="$t('form.placeholderInput')" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('form.qmyy')" prop="qmyy">
              <el-input type="text" :value="form.qmyy" maxlength="50" disabled
                :placeholder="$t('form.placeholderInput')" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="save">{{ $t('form.confirm') }}</el-button>
        <el-button @click="cancel">{{ $t('form.cancel') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ff, plff } from "@/api/business/gyzj/gyzj"
import { mapGetters } from 'vuex'
import SelectList from "./SelectList";
import SelectDeptUser from '@/views/business/comps/select/SelectDeptUser';
import SelectStudy from '@/views/business/comps/select/SelectStudy';
import BusinessSelect from '@/views/business/comps/select/BusinessSelect';

export default {
  name: "Ff",
  components: { SelectList, SelectDeptUser, SelectStudy, BusinessSelect },
  data() {
    return {
      isBatch: false,
      ids: [],
      selectList: [],
      open: false,
      form: {},
      rules: {
        ffr2mm: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }],
        ffr2Id: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }],
        ffr1mm: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }],
        ffr1Id: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }],
        lqr2mm: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }],
        lqr1mm: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }],
        lqr2Id: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }],
        lqr1Id: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }],
        mdIds: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }],
        qmrmm: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }],
        ckmz: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }],
        zytj: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }]
      }
    }
  },
  computed: {
    ...mapGetters([
      'nickName', 'name'
    ]),
  },
  created() {
  },
  methods: {
    selectStudyChange(val) {
      this.form.mdMcs = val.name
      this.form.mdOther = val.mdOther
    },
    selectStudyChangeBatch(val) {
      let that = this
      if (val && val.id && val.id !== '') {
        const _index = _.findIndex(that.selectList, function (o) { return o.id + '' === val.key })
        if (_index > -1) {
          that.selectList[_index].mdMcs = val.name
          that.selectList[_index].mdOther = val.mdOther
        }
      }
    },
    handleSc(row) {
      const that = this
      this.$modal.confirm(this.$t('form.confirmDelete')).then(() => {
        const _index = _.findIndex(that.selectList, function (o) { return o.id === row.id })
        if (_index > -1) {
          that.selectList.splice(_index, 1)
          that.form.ids = that.selectList.map(item => item.id)
        }
      }).catch(() => { })
    },
    showBatch(val) {
      this.reset()
      this.isBatch = true
      this.form.ids = val.map(item => item.id)
      let tmp = []
      _.forEach(val, function (item) {
        tmp.push({
          id: item.id,
          mc: item.mc,
          bh: item.bh,
          nd: item.nd,
          nddw: item.nddw,
          kc: item.kc,
          kcdw: item.kcdw,
          cctj: item.cctj,
          sxrq: item.sxrq,
          ccwz: item.ccwz,
          zytj: null,
          ckmz:null,
          mdIds: null,
          ckmz: null,
          mdMcs: null,
          mdOther: null,
          remark: null
        })
      })
      this.selectList = tmp
      this.open = true
    },
    cancel() {
      this.open = false
    },
    reset() {
      this.form = {
        id: null,
        ids: null,
        mc: null,
        bh: null,
        zytj: null,
        mdIds: null,
        mdMcs: null,
        mdOther: null,
        lqr1Id: null,
        lqr1Mc: null,
        lqr2Id: null,
        lqr2Mc: null,
        lqr1mm: null,
        lqr2mm: null,
        ffr1Id: null,
        ffr1Mc: null,
        ffr1mm: null,
        ffr2Id: null,
        ffr2Mc: null,
        ckmz:null,
        ckl:null,
        ffr2mm: null,
        qmyy: this.$t('page.business.resource.gyzj.lqff'),
        qmrmm: null,
        remark: null
      }
      this.resetForm("form")
    },
    show(row) {
      this.reset()
      this.isBatch = false
      this.form.ids = []
      this.selectList = []
      this.form.id = row.id
      this.form.mc = row.mc
      this.form.bh = row.bh
      this.form.sxrq = row.sxrq
      this.form.nd = row.nd
      this.form.nddw = row.nddw
      this.form.cctj = row.cctj
      this.form.ccwz = row.ccwz
      this.form.ckl = row.ckl
      this.form.ckldw = row.ckldw
      this.open = true
    },
    save() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          let params = this.form
          if (this.isBatch) {
            params.list = this.selectList
            if (this.selectList.length <= 0) {
              this.$modal.msgError("请选择要操作的给药制剂")
            } else {
              this.$modal.loading()
              plff(params).then(response => {
                this.open = false
                this.$emit('callback')
                this.$modal.closeLoading()
              }).finally(() => {
                this.$modal.closeLoading()
              })
            }
          } else {
            this.$modal.loading()
            ff(params).then(response => {
              this.open = false
              this.$emit('callback')
              this.$modal.closeLoading()
            }).finally(() => {
              this.$modal.closeLoading()
            })
          }
        }
      })
    }
  }
}
</script>
