<template>
  <div class="commonOpinion">
    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="0">
      <el-form-item label="" prop="value">
        <el-tooltip
          :disabled="tooltipDisabled || !pendingItemHandleDescription"
          placement="top"
        >
          <div slot="content">{{ pendingItemHandleDescription }}</div>
          <el-input
            v-model="form.value"
            :disabled="isBanInputOpinion == '1' || disabled"
            type="textarea"
            clear="inp"
            :placeholder="pendingItemHandleDescription || '请输入意见'"
            @change="changeOpinion"
            @blur="handleBlur"
            @focus="handleFocus"
            :rows="rows"
          ></el-input>
        </el-tooltip>
      </el-form-item>
    </el-form>
    <el-input
      v-model="input3"
      placeholder="请输入内容"
      class="input-with-select"
    >
      <el-select
        v-model="selectValue"
        slot="prepend"
        :disabled="isBanInputOpinion == '1'"
        placeholder="--请选择常用语--"
        @change="selectChange"
      >
        <el-option
          v-for="item in optionList"
          :key="item.id"
          :label="item.content"
          :value="item.content"
        ></el-option>
      </el-select>
      <el-button
        :disabled="disabled"
        slot="append"
        icon="el-icon-edit"
        @click="dialogVisible = true"
      ></el-button>
    </el-input>

    <!-- 弹窗内容 -->
    <es-dialog
      append-to-body
      title="常用意见设置"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
    >
      <div class="commonOpinion-set">
        <div style="text-align: right">
          <el-button
          style="margin-right: 22px;"
            type="primary"
            size="small"
            @click="
              () => {
                addVisible = true;
                (FormData.sep = optionList.length + 1),
                  (FormData.content = ''),
                  (FormData.id = null);
              }
            "
          >
            新增
          </el-button>
        </div>
        <Table
          style="flex: 1; display: flex; flex-direction: column"
          v-if="dialogVisible"
          :data-list="optionList"
          @upDateClick="upDate"
          @delClick="del"
        />
      </div>
    </es-dialog>

    <es-dialog
      append-to-body
      :close-on-click-modal="false"
      title="添加常用意见"
      :visible.sync="addVisible"
      :showScale="false"
      v-if="addVisible"
      width="600"
      height="auto"
    >
      <ideas :data="FormData" @subMit="submit" />
    </es-dialog>
  </div>
</template>

<script>
import {
  saveCommonOpinion,
  updateCommonOpinion,
  commonOpion,
  findSysParam,
  deleteCommonOpion
} from 'eoss-ui/src/config/api';
import Table from '../table.vue';
import ideas from '../form.vue';
import util from 'eoss-ui/src/utils/util';
export default {
  name: 'CommonOpinions',
  components: {
    [ideas.name]: ideas,
    [Table.name]: Table
  },
  data() {
    return {
      value: '',
      tooltipDisabled: false,
      form: {
        value: ''
      },
      input3: '',
      selectValue: '',
      optionList: [],
      dialogVisible: false,
      addVisible: false,
      disabled: false,
      FormData: {
        id: null
      }
    };
  },
  props: {
    isBanInputOpinion: {
      type: Number,
      default: 0
    },
    opinion: {
      type: String,
      default: ''
    },
    pendingItemHandleDescription: {
      type: String,
      default: ''
    },
    nodeFixedOpinionSelectList: {
      type: Array,
      default: () => []
    },
    rows: {
      type: [Number, String],
      default: 10
    },
    required: { type: Boolean, default: false }
  },
  computed: {
    rules() {
      return {
        value: [
          {
            required: this.required,
            message: '请输入意见',
            trigger: 'blur'
          }
        ]
      };
    }
  },
  mounted() {
    this.form.value = this.opinion;
    if (this.nodeFixedOpinionSelectList.length > 0) {
      this.optionList = this.nodeFixedOpinionSelectList;
      this.disabled = true;
    } else {
      this.getCommonOpion();
    }
  },
  watch: {
    opinion(val) {
      this.form.value = val;
      this.changeOpinion();
    }
  },
  methods: {
    handleBlur() {
      this.$emit('blur', this.form.value);
      this.tooltipDisabled = false;
    },
    handleFocus() {
      this.$emit('focus', this.form.value);
      this.tooltipDisabled = true;
    },
    validate() {
      let validSate = true;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          validSate = true;
        } else {
          validSate = false;
        }
      });
      return validSate;
    },
    /**
     * changeOpinion
     * @desc:监听意见变化
     * @author liufan
     * @date 2022年10月28日
     **/
    changeOpinion() {
      this.$emit('change', this.form.value);
    },
    /**
     * getCommonOpion
     * @desc:获取意见
     * @author liufan
     * @date 2022年5月25日
     **/
    getCommonOpion() {
      util
        .ajax({
          url: commonOpion,
          params: {
            userId: util.getStorage('userId')
          },
          method: 'post'
        })
        .then((res) => {
          const { status, data, msg } = res;
          if (status === 'success') {
            this.optionList = data.list;
            this.FormData.sep = this.optionList.length + 1;
          } else {
            this.$message.error(msg || '系统错误，请联系管理员！');
          }
        })
        .catch((err) => {
          if (err.message && err.message !== 'canceled') {
            this.$message.error(err.message);
          }
        });
    },
    /**
     * upDate
     * @desc:修改常用语
     * @author liufan
     * @param {Object} val 修改值
     * @date 2022年5月25日
     **/
    upDate(val) {
      this.FormData.id = val.id;
      this.addVisible = true;
    },
    /**
     * selectChange
     * @desc:常用语选择
     * @author liufan
     * @param {String} val 选中值
     * @date 2022年5月25日
     **/
    selectChange(val) {
      const that = this;
      util
        .ajax({
          url: findSysParam,
          params: { cpName: 'commonOpinionsSelectType' }
        })
        .then((res) => {
          if (res.status == 'success') {
            res.data == 2
              ? (that.form.value = that.form.value + val)
              : (that.form.value = val);
          } else {
            that.form.value = val;
          }
          this.$emit('change', that.form.value);
        });
    },
    /**
     * del
     * @desc:删除常用语
     * @author liufan
     * @param {Object} val 删除的数据
     * @date 2022年5月25日
     **/
    del(val) {
      this.$confirm('您确定要删除此信息吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.loading = util.loading(this.$loading, '删除中...');
          util
            .ajax({
              url: deleteCommonOpion,
              params: {
                id: val.id
              }
            })
            .then((res) => {
              const { status, message } = res;
              if (status == 'success') {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                this.getCommonOpion();
              } else {
                this.$message({
                  type: 'error',
                  message: message || '系统错误，请联系管理员！'
                });
              }
              this.loading.close();
            })
            .catch((err) => {
              if (err.message && err.message !== 'canceled') {
                this.$message.error(err.message);
              }
              this.loading.close();
            });
        })
        .catch((e) => {});
    },
    /**
     * submit
     * @desc:新增/编辑意见保存
     * @author liufan
     * @param {Object} val 保存数据
     * @date 2022年5月25日
     **/
    submit(val) {
      const { addVisible, data } = val;
      let info = {};
      for (let key in data) {
        info[`bean.${key}`] = data[key];
      }
      this.loading = util.loading(this.$loading, '提交中...');
      util
        .ajax({
          url: data.id ? updateCommonOpinion : saveCommonOpinion,
          data: info,
          header: { 'Content-Type': 'multipart/form-data' },
          method: 'post'
        })
        .then((res) => {
          const { rCode, msg } = res;
          this.loading.close();
          if (!rCode) {
            if (this.FormData.id) {
              this.$message.success('修改成功');
            } else {
              this.$message.success('新增成功');
            }
            this.getCommonOpion();
          } else {
            this.$message.error(msg || '系统错误，请联系管理员！');
          }
          this.addVisible = addVisible;
        })
        .catch((err) => {
          this.loading.close();
          if (err.message && err.message !== 'canceled') {
            this.$message.error(err.message);
          }
        });
    }
  }
};
</script>

<style></style>
