<template>
  <div>
    <!-- 发放弹窗 -->
    <el-dialog :title="$t('page.business.resource.gsp.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">
        <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.gsp.mc')" align="left" prop="mc"
                  :show-overflow-tooltip="true" width="100px" />
                <el-table-column :label="$t('page.business.resource.gsp.bh')" align="left" prop="bh"
                  :show-overflow-tooltip="true" width="100px" />
                <el-table-column :label="$t('page.business.resource.gsp.ph')" align="center" prop="ph">
                </el-table-column>
                <el-table-column :label="$t('page.business.resource.gsp.gg')" align="center" prop="gg">
                  <template slot-scope="scope">
                    {{ scope.row.gg }}{{ scope.row.ggdw }}
                  </template>
                </el-table-column>
                <el-table-column :label="$t('page.business.resource.gsp.yxq')" align="center" prop="yxq"
                  width="150px" />
                <el-table-column :label="$t('page.business.resource.gsp.jsrq')" align="center" prop="jsrq"
                  width="130px" />
                <el-table-column :label="$t('page.business.resource.gsp.ckjz')" align="center">
                  <template slot-scope="scope">
                    {{ scope.row.kc }}{{ scope.row.kcdw }}
                  </template>
                </el-table-column>
                <el-table-column :label="$t('page.business.resource.gsp.zysx')" align="center" prop="zysx"
                  width="130px" />
                <el-table-column :label="$t('page.business.resource.gsp.zytj')" align="center" width="250px">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.zytj" maxlength="50"
                      :placeholder="$t('form.placeholderInput')" />
                  </template>
                </el-table-column>
                <el-table-column :label="$t('page.business.resource.mjy.md')" align="center" width="250px">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.xmId" maxlength="50"
                      :placeholder="$t('form.placeholderInput')" />
                  </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.gsp.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.gsp.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.gsp.ph')">
                <el-input type="text" v-model="form.ph" maxlength="50" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('page.business.resource.gsp.gg')">
                <el-input type="text" v-model="form.gg" maxlength="50" disabled> <template slot="append">{{ form.ggdw
                }}</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item :label="$t('page.business.resource.gsp.yxq')">
                <el-input type="text" v-model="form.yxq" maxlength="50" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('page.business.resource.gsp.cctj')">
                <el-input type="text" v-model="form.cctj" maxlength="50" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item :label="$t('page.business.resource.gsp.jsrq')">
                <el-input type="text" v-model="form.jsrq" maxlength="50" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('page.business.resource.gsp.ckjz')" >
                <el-input type="text" v-model="form.kc" maxlength="50" disabled ><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.gsp.zysx')">
                <el-input type="textarea" v-model="form.zysx" maxlength="50" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item :label="$t('page.business.resource.gsp.zytj')" prop="zytj">
                <el-input type="text" v-model="form.zytj" maxlength="50" :placeholder="$t('form.placeholderInput')" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('page.business.resource.gsp.md')" prop="mdIds">
                <el-input type="text" v-model="form.mdIds" maxlength="20" :placeholder="$t('form.placeholderInput')">
                </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="2" 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.gsp.lqr1')" prop="lqr1Id">
              <SelectDeptUser v-model="form.lqr1Id" key="lqr1Id" :name="form.lqr1Mc" @change="userSelectLqr1" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('page.business.resource.gsp.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.gsp.lqr2')" >
              <SelectDeptUser v-model="form.lqr2Id" key="lqr2Id" :name="form.lqr2Mc" @change="userSelectLqr2"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('page.business.resource.gsp.lqr2')+$t('form.password')" >
              <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.mjy.ffr1')" prop="ffr1Id">
              <SelectDeptUser v-model="form.ffr1Id" :name="form.ffr1Mc" key="ffr1Id" @change="userSelectFfr1" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('page.business.resource.mjy.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.mjy.ffr2')" prop="ffr2Id">
              <SelectDeptUser v-model="form.ffr2Id" key="ffr2Id" :name="form.ffr2Mc" @change="userSelectFfr2" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('page.business.resource.mjy.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/gsp/gsp"
import { mapGetters } from 'vuex'
import SelectList from "./SelectList";
import SelectDeptUser from '@/views/business/comps/select/SelectDeptUser';

export default {
  name: "Ff",
  components: { SelectList, SelectDeptUser },
  data() {
    return {
      isBatch: false,
      ids: [],
      selectList: [],
      open: false,
      form: {},
      rules: {
        mdIds: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }],
        ffr1mm: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }],
        ffr1Id: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }],
        lqr1mm: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }],
        lqr1Id: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }],
        xmId: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }],
        ckmzdw: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }],
        qmrmm: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }],
        ckmz: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }],
        xmId: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }],
        zytj: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }]


      }
    }
  },
  computed: {
    ...mapGetters([
      'nickName', 'id'
    ]),
  },
  created() {
  },
  methods: {
    userSelectLqr1(val) {
      this.form.lqr1Id = val.id;
      this.form.lqr1Mc = val.name;
    },
    userSelectLqr2(val) {
      this.form.lqr2Id = val.id;
      this.form.lqr2Mc = val.name;
    },
    userSelectFfr1(val) {
      this.form.ffr1Id = val.id
      this.form.ffr1Mc = val.name
    },
    userSelectFfr2(val) {
      this.form.ffr2Id = val.id
      this.form.ffr2Mc = val.name
    },
    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) {
        let a=item
        a.ckmzdw=a.kcdw
        a.zytj=null
        a.ckmz=null
        a.xmIds=null
        a.remark=null
        tmp.push(a)
      })
      this.selectList = tmp
      this.open = true
    },
    cancel() {
      this.open = false
    },
    reset() {
      this.form = {
        id: null,
        ids: null,
        mc: null,
        bh: null,
        ckmzdw: null,
        zytj: null,
        mdIds: null,
        ckmz: null,
        lqr1Id: null,
        lqr1Mc: null,
        lqr2Id: null,
        lqr1mm: null,
        lqr2mm: null,
        ffr1Id: this.id,
        ffr1Mc: this.nickName,
        ffr1mm: null,
        ffr2Id: null,
        ffr2mm: null,
        xmId: null,
        qmyy: this.$t('page.business.resource.gsp.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.ph = row.ph
      this.form.gg = row.gg
      this.form.ggdw = row.ggdw
      this.form.yxq = row.yxq
      this.form.jsrq = row.jsrq
      this.form.cctj = row.cctj
      this.form.kc = row.kc
      this.form.kcdw = row.kcdw
      this.form.zysx = row.zysx
      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 {
              plff(params).then(response => {
                this.open = false
                this.$emit('callback')
              })
            }
          } else {
            ff(params).then(response => {
              this.open = false
              this.$emit('callback')
            })
          }
        }
      })
    }
  }
}
</script>
