<template>
  <div>
    <!-- 钥匙发放弹窗 -->
    <el-dialog :title="$t('page.business.resource.gyzj.ysff')" :visible.sync="open" width="1200px" append-to-body
      :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" :label-width="$i18n.locale === 'zh_CN'?'140px':'170px'" v-if="open">
        <div class="sbzdtcma"> <input type="text"> <input   type="password" show-password> </div>
        <div>
          <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="center" prop="mc"
                  :show-overflow-tooltip="true" />
                <el-table-column :label="$t('page.business.resource.gyzj.bh')" align="center" prop="bh"
                  :show-overflow-tooltip="true" />
                <el-table-column :label="$t('page.business.resource.gyzj.ckl')" align="center" width="150px">
                  <template slot-scope="scope">
                    {{ scope.row.ckl }}{{ scope.row.ckldw }}
                  </template>
                </el-table-column>
                <el-table-column :label="$t('page.business.resource.gyzj.ffzytj')" align="center" prop="ffzytj"
                  width="250px" />
                <el-table-column :label="$t('page.business.resource.gyzj.lqr1')" align="center" prop="lqr1Mc"
                  width="150px" />
                <el-table-column :label="$t('page.business.resource.gyzj.lqr2')" align="center" prop="lqr2Mc"
                  width="150px" />
                <el-table-column :label="$t('page.business.resource.gyzj.ffr1')" align="center" prop="ffr1Mc"
                  width="150px" />
                <el-table-column :label="$t('page.business.resource.gyzj.ffr2')" align="center" prop="ffr2Mc"
                  width="150px" />
                <el-table-column :label="$t('form.remark')" align="center" prop="ffbz" width="150px" />
                <el-table-column :label="$t('page.business.resource.gyzj.md')" align="center" width="250px">
                  <template slot-scope="scope">
                    <span
                      v-if="scope.row.mdOther && scope.row.mdOther != '' && scope.row.mdMcs && scope.row.mdMcs != ''">{{
                      scope.row.mdMcs }}{{ scope.row.mdOther }}</span>
                    <span v-else>{{ scope.row.mdMcs }},{{ scope.row.mdOther }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('page.business.resource.gyzj.zcg')" prop="zcgId">
              <SelectZcg v-model="form.zcgId"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('form.qmyy')" prop="qmyy">
              <el-input type="text" v-model="form.qmyy" maxlength="50" disabled
                :placeholder="$t('form.placeholderInput')" />
            </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>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('page.business.resource.gyzj.yslqr1')" 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.yslqr1')+$t('form.password')" prop="lqr1mm">
              <el-input   type="password" show-password v-model="form.lqr1mm" maxlength="20" :placeholder="$t('form.placeholderInput')">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('page.business.resource.gyzj.yslqr2')" 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.yslqr2')+$t('form.password')" prop="lqr2mm">
              <el-input   type="password" show-password v-model="form.lqr2mm" maxlength="20" :placeholder="$t('form.placeholderInput')">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('page.business.resource.gyzj.ffr')">
              <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('form.password')" prop="ffrmm">
              <el-input   type="password" show-password v-model="form.ffrmm" maxlength="20" :placeholder="$t('form.placeholderInput')">
              </el-input>
            </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 { ysff } from "@/api/business/gyzj/gyzj"
import { mapGetters } from 'vuex'
import SelectDeptUser from '@/views/business/comps/select/SelectDeptUser';
import SelectZcg from '@/views/business/comps/select/SelectZcg';

export default {
  name: "Ysff",
  components: { SelectDeptUser,SelectZcg },
  data() {
    return {
      ids: [],
      selectList: [],
      open: false,
      form: {},
      rules: {
        qmrmm: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }],
        zcgId: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }],
        lqr2mm: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }],
        lqr1mm: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }],
        lqr1Id: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }],
        lqr2Id: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }],
        ffrmm: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }],
      }
    }
  },
  computed: {
    ...mapGetters([
      'nickName','name'
    ]),
  },
  created() {
  },
  methods: {
    showBatch(val) {
      this.reset()
      this.isBatch = true
      this.form.ids = val.map(item => item.id)
      this.selectList = val
      this.open = true
    },
    cancel() {
      this.open = false
    },
    reset() {
      this.form = {
        ids: null,
        qmyy: this.$t('page.business.resource.gyzj.ysff'),
        zcgId: null,
        qmrmm: null,
        remark: null,
        lqr1Id: null,
        lqr2Id: null,
        lqr1mm: null,
        lqr2mm: null,
        ffrId: null,
        ffrmm: null,
      }
      this.resetForm("form")
    },
    save() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          let params = this.form
          params.list = this.selectList
          this.$modal.loading()
          ysff(params).then(response => {
            this.open = false
            this.$emit('callback')
            this.$modal.closeLoading()
          }).finally(() => {
            this.$modal.closeLoading()
          })
        }
      })
    }
  }
}
</script>
