<template>
  <div>
    <el-button size="mini"
               type="text"
               @click="getTableExplain()">编辑
    </el-button>
    <el-dialog title="说明" :visible.sync="explain.open" append-to-body fullscreen>
      <el-row style="margin-bottom: 10px">
        <el-col>
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="addExplainItem"
          >新增
          </el-button>
        </el-col>
      </el-row>
      <el-form>
        <div v-for="(item,index) in explain.data.list" style="padding: 5px">
          <el-card>
            <el-button
              class="delete-explain"
              size="mini"
              type="text"
              icon="el-icon-close"
              @click="deleteExplain(index)"
            >
            </el-button>
            <div style="padding: 10px;">
              <el-link style="font-size: 28px" v-show="item.readonly" type="primary" @click="readOnlyFalse(item,index)">
                {{ item.label }}
              </el-link>
              <el-input style="font-size: 28px" ref="input" v-show="!item.readonly" v-model="item.label"
                        @blur="blurReadOnlyTrue(item)"/>
            </div>
            <!--<el-input v-model="item.text" type="textarea" :autosize="{ minRows: 10, maxRows: 20}"/>-->
            <editor v-model="item.text" :height="300"></editor>
          </el-card>
        </div>
        <div>
          <file-upload v-model="explain.data.involveFile"/>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitExplain">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {addConfig} from "@/api/system/config";

export default {
  name: "explainNote",
  props: {
    recordTableName: {
      type: String,
      default: ''
    },
    tableDataId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      explain: {
        open: false,
        data: {
          list: [
            {label: '编辑', text: '', readonly: true}
          ],
          involveFile: ''
        }
      }
    }
  },
  methods: {
    // 取消按钮
    cancel() {
      this.open = false;
      this.explain.open = false;
      this.reset();
    },
    submitExplain() {
      this.addExplain()
    },
    getTableExplain() {
      this.explain.open = true;
      this.getConfigKey(this.recordTableName + "_id_" + this.tableDataId + "_key").then(result => {
        if (result.code === 200) {
          if (result.msg) {
            this.explain.data = JSON.parse(result.msg)
          } else {
            this.explain.data.list = [{label: '编辑', text: '', readonly: true}]
            this.explain.data.involveFile = undefined
          }
        } else {
          this.$modal.msgError("未指定Key")
        }
      })
    },
    addExplain() {
      let tableInfo = this.recordTableName + "_id_" + this.tableDataId
      let data = {
        configName: tableInfo + "_说明记录",
        configKey: tableInfo + "_key",
        configValue: JSON.stringify(this.explain.data),
        configType: "Y"
      }
      addConfig(data).then(result => {
        if (result.code === 200) {
          this.$modal.msgSuccess("更新成功")
          this.explain.open = false
        }
      })
    },
    blurReadOnlyTrue(item) {
      item.readonly = true
    },
    readOnlyFalse(item, index) {
      item.readonly = false
      //重新获取输入框的焦点
      this.$nextTick(() => {
        this.$refs.input[index].focus()
      });
    },
    addExplainItem() {
      this.explain.data.list.push({
        label: '编辑', text: '', readonly: true
      })
    },
    deleteExplain(index) {
      this.explain.data.splice(index, 1)
    }
  }
}
</script>

<style scoped>

</style>
