<template>
  <div>
    <!-- 处置药剂弹窗 -->
    <el-dialog :title="isBatch?$t('page.business.resource.mjy.plczyjt'):$t('page.business.resource.mjy.czyjt')" :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.mjy.mc')" align="left" prop="mc"
                  :show-overflow-tooltip="true" width="120px" />
                <el-table-column :label="$t('page.business.resource.mjy.bh')" align="left" prop="bh"
                  :show-overflow-tooltip="true" width="120px" />
                <el-table-column :label="$t('page.business.resource.mjy.czfs')" align="center" width="250px">
                  <template slot-scope="scope">
                    <BusinessSelect v-model="scope.row.czfs" dictType="business_czfs"></BusinessSelect>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('page.business.resource.mjy.yuanyin')" align="center">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.czyy" maxlength="50"
                      :placeholder="$t('form.placeholderInput')" />
                  </template>
                </el-table-column>
                <el-table-column :label="$t('page.business.resource.mjy.czl')" align="center">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.czl" maxlength="50"
                      :placeholder="$t('form.placeholderInput')"> <template slot="append">{{ scope.row.kcdw
                        }}</template>
                    </el-input>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('form.operate')" align="center" width="150px">
                  <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.mjy.mc')" prop="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.mjy.bh')" prop="glyj">
                <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.mjy.czfs')" prop="czfs">
                    <BusinessSelect v-model="form.czfs" dictType="business_czfs"></BusinessSelect>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('page.business.resource.mjy.czl')" prop="czl">
                 <el-input type="text" v-model="form.czl" maxlength="50"
                      :placeholder="$t('form.placeholderInput')"> <template slot="append">{{ form.kcdw
                        }}</template>
                    </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item :label="$t('page.business.resource.mjy.yuanyin')" prop="czyy">
                <el-input type="textarea" v-model="form.czyy" :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.mjy.clr')">
              <el-input type="text" v-model="nickName" maxlength="50" disabled />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item :label="$t('page.business.resource.mjy.clr') + $t('form.password')" prop="clrmm">
              <el-input type="password" v-model="form.clrmm" 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.mjy.fhr')" prop="fhrId">
              <SelectDeptUser v-model="form.fhrId" key="fhrId" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item :label="$t('page.business.resource.mjy.fhr') + $t('form.password')" prop="fhrmm">
              <el-input type="password" v-model="form.fhrmm" 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.mjy.jdr')" prop="jdrId">
              <SelectDeptUser v-model="form.jdrId" key="jdrId" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('page.business.resource.mjy.jdr') + $t('form.password')" prop="jdrmm">
              <el-input type="password" v-model="form.jdrmm" maxlength="20"
                :placeholder="$t('form.placeholderInput')" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('form.qmyy')" prop="qmyy">
              <el-input type="text" v-model="form.qmyy" maxlength="20" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="save" :disabled="isBatch&&selectList.length==0">{{ $t('form.confirm') }}</el-button>
        <el-button @click="cancel">{{ $t('form.cancel') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { czyj, plczyj } from "@/api/business/mjy/mjy"
import { mapGetters } from 'vuex'
import SelectDeptUser from '@/views/business/comps/select/SelectDeptUser';
import BusinessSelect from '@/views/business/comps/select/BusinessSelect';

export default {
  name: "Czyj",
  components: { SelectDeptUser,BusinessSelect },
  data() {
    return {
      isBatch: false,
      ids: [],
      selectList: [],
      open: false,
      form: {},
      rules: {
        czyy: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }],
        czfs: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }],
        czl: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }],
        clrId: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }],
        fhrId: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }],
        jdrId: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }],
        clrmm: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }],
        fhrmm: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }],
        jdrmm: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }]
      }
    }
  },
  computed: {
    ...mapGetters([
      'nickName','name'
    ]),
  },
  created() {
  },
  methods: {
    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.selectList = []
      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,
          kcdw: item.kcdw,
          czyy: null,
          czl: null,
          czfs: null,
        })
      })
      this.selectList = tmp
      this.open = true
    },
    cancel() {
      this.open = false
    },
    reset() {
      this.form = {
        id: null,
        ids: null,
        mc: null,
        bh: null,
        czyy: null,
        kcdw: null,
        czfs: null,
        clrId: null,
        fhrId: null,
        jdrId: null,
        czl: null,
        qmyy: this.$t('page.business.resource.mjy.czyj'),
        qmrmm: 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.kcdw = row.kcdw
      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()
              plczyj(params).then(response => {
                this.open = false
                this.$emit('callback')
                this.$modal.closeLoading()
              }).finally(() => {
                this.$modal.closeLoading()
              })
            }
          } else {
            this.$modal.loading()
            czyj(params).then(response => {
              this.open = false
              this.$emit('callback')
              this.$modal.closeLoading()
            }).finally(() => {
              this.$modal.closeLoading()
            })
          }

        }
      })
    }
  }
}
</script>
