<template>
  <el-dialog
    :visible.sync="visible"
    :before-close="handleClose"
    title="图片备注信息"
    width="780px">
    <div class="guestInfo-dialog">
      <div class="btn-wrap-left">
        <el-button
          plain
          size="mini"
          type="primary"
          @click="handleAdd"
        >
          添加图片备注
        </el-button>
      </div>

      <el-form
        class="table-box"
        ref="form"
        :model="model"
      >
        <el-table
          border
          stripe
          class="guest-info-table"
          :data="model.pictureRemarks"
        >
          <el-table-column
            label="#"
            type="index"
            width="50"
          >
          </el-table-column>
          <el-table-column
            label="图片"
            min-width="120"
          >
            <template slot-scope="scope">
              <GetPicture v-model="scope.row.url"></GetPicture>
            </template>
          </el-table-column>
          <el-table-column
            prop="guestName"
            label="图片备注"
          >
            <template slot-scope="scope">
              <el-form-item
                verify
                can-be-empty
                :prop="'pictureRemarks.' + scope.$index + '.remark'"
              >
                <el-input
                  clearable
                  size="small"
                  :disabled="scope.row.lock"
                  v-model="scope.row.remark"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
          >
            <template slot-scope="scope">
              <span
                v-if="remarksData.length>1"
                class="el-button el-button--primary el-button--mini"
                @click="handleDelete(scope.row.idKey)"
              >
                <i class="el-icon-delete"></i>
                删除
              </span>
            </template>
          </el-table-column>
        </el-table>
      </el-form>

      <div class="dialog-btn-wrap">
        <el-button
          type="primary"
          @click="handleClose">
          取消
        </el-button>
        <el-button
          type="primary"
          @click="handleSave">
          确定
        </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { setPictureRemarks } from '@/pages/common'
import GetPicture from '@/components/GetFace/getPicture'

export default {
  components: {
    GetPicture
  },
  props: {
    // 是否需要填写游客信息
    pictureRemarks: {
      type: Array,
      default: () => []
    },
    // 不同组件，游客数据不同，把游客数据更新交给父组件的方法来处理
    updateRemarks: {
      type: Function,
      default: () => {}
    }
  },

  computed: {
    model () {
      return { pictureRemarks: this.remarksData }
    },

    uploadUrl () {
      return this.$store.state.app.systemConfig.find(i => i.configKey === 'export_file_upload_url').configValue
    }
  },
  data () {
    return {
      visible: false,
      remarksData: []
    }
  },
  methods: {
    show () {
      this.visible = true
      this.remarksData = JSON.parse(JSON.stringify(this.pictureRemarks))
    },
    handleAdd () {
      setPictureRemarks(this.remarksData, 1)
    },
    handleDelete (idKey) {
      let index = this.remarksData.findIndex(item => {
        return item.idKey === idKey
      })
      this.remarksData.splice(index, 1)
    },
    resetForm () {
      this.$refs.form.resetFields()
    },
    handleClose () {
      this.visible = false
      this.finished = true
      this.resetForm()

      this.timer && clearTimeout(this.timer)
    },
    handleSave () {
      // 是否存在未填写的内容
      let blankData = this.remarksData.find(item => {
        return !item.url
      })
      console.log('blankData', blankData)
      if (blankData && this.remarksData.length !== 1) {
        this.$message.error('图片备注信息请填写完整')
        return
      }
      this.$refs.form.validate().then(val => {
        if (val) {
          console.log(val)
          // 表单重置时，会导致当前对象被清空。避免操作了错误的对象
          let newData = JSON.parse(JSON.stringify(this.remarksData))
          this.updateRemarks(newData)
          this.handleClose()
        }
      }).catch(e => {
        this.$message.error('输入的信息有误，请检查')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
