<!--
 * @Description: 画像主题编辑对话框组件
 * @Author: wenjing
 * @Date: 2023-07-14 11:30:56
-->
<template>
	<el-dialog :title="title" :visible.sync="showDialog" width="1100px" center
	  :before-close="handleCloseDialog" :close-on-click-modal="false" @open="handleOpenDialog">
    <el-form ref="subjectForm" :model="subjectForm" :rules="RulesSubjectForm" label-width="120px">
      <div style="display:flex;">
        <span style="display:flex;">
          <el-form-item label="key:" prop="key">
            <el-input style="width:150px" v-model="subjectForm.key" placeholder="请输入唯一键值"
              maxlength="20" clearable :disabled="(mode === 'edit')" />
          </el-form-item>
          <el-form-item label="版本号:" prop="version" label-width="90px">
            <el-select style="width:110px" v-model="subjectForm.version" clearable placeholder="请选择版本号">
              <el-option v-for="(version, index) in subjectDO.versionList" :key="index" :label="version" :value="version" />
            </el-select>
          </el-form-item>
        </span>
        <el-form-item label="采集结构:" prop="getherStructure" label-width="140px">
          <el-select style="width:350px" v-model="subjectForm.getherStructure"  clearable placeholder="请选择采集结构类型">
            <el-option v-for="(strc, index) in subjectDO.dataStrcList" :key="index" :label="strc" :value="strc" />
          </el-select>
        </el-form-item>
      </div>
      <div style="display:flex">
        <el-form-item label="采集标签集:" prop="getherTagSetKeyList">
          <el-select style="width:350px" v-model="subjectForm.getherTagSetKeyList" 
            multiple :multiple-limit="3" clearable placeholder="请选择采集标签集">
            <el-option v-for="(gtKey, index) in subjectDO.getherTagSetKeyList" :key="index" :label="gtKey" :value="gtKey" />
          </el-select>
        </el-form-item>
        <el-form-item label="计算型标签集:" prop="compTagSetKeyList" label-width="140px">
          <el-select style="width:350px;" v-model="subjectForm.compTagSetKeyList"
            multiple :multiple-limit="3" clearable placeholder="请选择计算型分析标签集">
            <el-option v-for="(cpKey, index) in subjectDO.compTagSetKeyList" :key="index" :label="cpKey" :value="cpKey" />
          </el-select>
        </el-form-item>
      </div>
      <div style="display:flex">
        <el-form-item label="评估型标签集:" prop="evalTagSetKeyList" >
          <el-select style="width:350px" v-model="subjectForm.evalTagSetKeyList"
            multiple :multiple-limit="3" clearable placeholder="请选择评估型分析标签集">
            <el-option v-for="(evKey, index) in subjectDO.evalTagSetKeyList" :key="index" :label="evKey" :value="evKey" />
          </el-select>
        </el-form-item>
        <el-form-item label="人工标签集:" prop="manualTagSetKey" label-width="140px">
          <el-select style="width:350px" v-model="subjectForm.manualTagSetKey" clearable placeholder="请选择人工标签集">
            <el-option v-for="(mnKey, index) in subjectDO.manualTagSetKeyList" :key="index" :label="mnKey" :value="mnKey" />
          </el-select>
        </el-form-item>
      </div>
      <div style="display:flex" v-for="(tagSet, index) in subjectForm.renderTagSetList" :key="index">
        <el-form-item label="展现标签集:" :prop="'renderTagSetList.' + index + '.renderTagSetKey'" :rules="RulesRenderTagSetKey">
          <el-select v-model="tagSet.renderTagSetKey" style="width:350px" clearable placeholder="请选择展现标签集">
            <el-option v-for="(rdKey, index) in subjectDO.renderTagSetKeyList" :key="index" :label="rdKey" :value="rdKey" />
          </el-select>
        </el-form-item>
        <span style="display:flex;">
          <el-form-item label="匹配用户字段:" :prop="'renderTagSetList.' + index + '.matchedField'" 
            :rules="RulesMatchedField" label-width="140px">
            <el-input style="width:140px" v-model="tagSet.matchedField" maxlength="30" clearable placeholder="请输入字段名" />
          </el-form-item>
          <el-form-item label="字段值:" prop="matchedValue" label-width="80px">
            <el-input style="width:130px" v-model="tagSet.matchedValue" 
              maxlength="30" clearable placeholder="请输入字段值" />&emsp;
            <i v-if="index === 0" v-show="subjectForm.renderTagSetList.length <= 2"
              class="el-icon-circle-plus-outline  mouse-pointer" style="color:#397AFA" @click="handleAddLine"></i>
            <i v-else class="el-icon-remove-outline  mouse-pointer" style="color:#397AFA" @click="handleDelLine(index)"></i>
          </el-form-item>
        </span>
      </div>
      <!-- 标签颜色集 -->
      <div style="display:flex; height:60px;">
        <div style="display:flex">
          <el-form-item label="计算型标签色:" prop="compTagColorsStr">
            <el-input v-show="false" v-model="subjectForm.compTagColorsStr"></el-input>
            <div class="color-block" :style="tagColorStyle('comp')">&ensp;{{tagColorStr('comp')}}&ensp;</div>
          </el-form-item>
          <el-form-item label-width="0px">
            <el-color-picker v-model="subjectForm.tagColorSet.compTagTextColor" />
          </el-form-item>
          <el-form-item label-width="0px">
            <el-color-picker v-model="subjectForm.tagColorSet.compTagTextBgColor" />
          </el-form-item>
        </div>
        <div style="display:flex">
          <el-form-item label="评估型标签色:" prop="evalTagColorsStr" label-width="245px">
            <el-input v-show="false" v-model="subjectForm.evalTagColorsStr"></el-input>
            <div class="color-block" :style="tagColorStyle('eval')">&ensp;{{tagColorStr('eval')}}&ensp;</div>
          </el-form-item>
          <el-form-item label-width="0px">
            <el-color-picker v-model="subjectForm.tagColorSet.evalTagTextColor" />
          </el-form-item>
          <el-form-item label-width="0px">
            <el-color-picker v-model="subjectForm.tagColorSet.evalTagTextBgColor" />
          </el-form-item>
        </div>
      </div>
      <div style="display:flex">
        <div style="display:flex">
          <el-form-item label="人工标签色:" prop="manualTagColorsStr">
            <el-input v-show="false" v-model="subjectForm.manualTagColorsStr"></el-input>
            <div class="color-block" :style="tagColorStyle('manual')">&ensp;{{tagColorStr('manual')}}&ensp;</div>
          </el-form-item>
          <el-form-item label-width="0px">
            <el-color-picker v-model="subjectForm.tagColorSet.manualTagTextColor" />
          </el-form-item>
          <el-form-item label-width="0px">
            <el-color-picker v-model="subjectForm.tagColorSet.manualTagTextBgColor" />
          </el-form-item>
        </div>
      </div>
    </el-form>
    <div style="margin-top:20px; text-align:center;">
      <el-button size="small" @click="handleCloseDialog">取 消</el-button>
      <el-button size="small" type="primary" @click="handleSave">保 存</el-button>
    </div>
	</el-dialog>
</template>

<script>
export default {
  name: 'EditSubjectDlg',
	props: ['mode', 'showDialog', 'curKey'],

  data() {
    return {
      title: '',
      refreshFlag: false,    //指示从对话框返回后是否刷新页面

      subjectDO: {},
      subjectForm: {
        getherTagSetKeyList: [],
        compTagSetKeyList: [],
        evalTagSetKeyList: [],
        manualTagSetKey: [],
        renderTagSetList: [{}],
        tagColorSet: {},
        compTagColorsStr: '',       //用于临时保存设置的标签文字/背景色
        evalTagColorsStr: '',       //用于临时保存设置的标签文字/背景色
        manualTagColorsStr: '',     //用于临时保存设置的标签文字/背景色
      },

      RulesSubjectForm: {
        key: [
          { required: true, message: '请输入唯一Key', trigger: 'blur' },
          { type: 'string', pattern: /^([a-zA-Z0-9]|-|[\u4e00-\u9fa5])+$/, message: '只能输入汉字、字母或数字', trigger: 'blur' },
          { min: 1, max: 30, message: '最大长度不超过30个字符', trigger: 'blur' }
        ],
        version: [{ required: true, message: '请选择版本号', trigger: 'blur' }],
        getherStructure: [{ required: true, message: '请选择采集结构类型', trigger: 'blur' }],
        getherTagSetKeyList: [{ required: true, message: '请选择采集标签集', trigger: 'blur' }],
        compTagSetKeyList: [{ required: true, message: '请选择计算型标签集', trigger: 'blur' }],
        evalTagSetKeyList: [{ required: true, message: '请选择评估型标签集', trigger: 'blur' }],
        manualTagSetKey: [{ required: true, message: '请选择人工标签集', trigger: 'blur' }],
        
        compTagColorsStr: [
          { required: true, message: '请设置标签文本颜色', trigger: 'blur' },
          { type: 'string', pattern: /^#([a-fA-F0-9]{6}) \| #([a-fA-F0-9]{6})$/, message: '格式应为16进制色码', trigger: 'blur' }
        ],
        evalTagColorsStr: [
          { required: true, message: '请设置标签文本颜色', trigger: 'blur' },
          { type: 'string', pattern: /^#([a-fA-F0-9]{6}) \| #([a-fA-F0-9]{6})$/, message: '格式应为16进制色码', trigger: 'blur' }
        ],
        manualTagColorsStr: [
          { required: true, message: '请设置标签文本颜色', trigger: 'blur' },
          { type: 'string', pattern: /^#([a-fA-F0-9]{6}) \| #([a-fA-F0-9]{6})$/, message: '格式应为16进制色码', trigger: 'blur' }
        ]
      },
      RulesRenderTagSetKey: [{ required: true, message: '请选择展现标签集', trigger: 'blur' }],
      RulesMatchedField: [{ type: 'string', pattern: /^[a-zA-Z]+([a-zA-Z0-9])*$/, message: '不符合命名规范', trigger: 'blur' }],
    }
  },

  computed: {
    tagColorStyle() {
      return function(tagType) {
        let colorSet = this.subjectForm.tagColorSet;
        let color = 'lightgray';
        let bgcolor = 'white';
        switch (tagType) {
          case 'comp':
            if (colorSet.compTagTextColor) color = colorSet.compTagTextColor;
            if (colorSet.compTagTextBgColor) bgcolor = colorSet.compTagTextBgColor;
            break;
          case 'eval':
            if (colorSet.evalTagTextColor) color = colorSet.evalTagTextColor;
            if (colorSet.evalTagTextBgColor) bgcolor = colorSet.evalTagTextBgColor;
            break;
          case 'manual':
            if (colorSet.compTagTextColor) color = colorSet.manualTagTextColor;
            if (colorSet.compTagTextBgColor) bgcolor = colorSet.manualTagTextBgColor;
            break;
        }
        return 'color:' + color + ';background:' + bgcolor + ';border:1px solid ' + color;
      }
    },

    tagColorStr() {
      return function(tagType) {
        let colorSet = this.subjectForm.tagColorSet;
        let text = '未定义';
        let bgtext = '未定义';
        switch (tagType) {
          case 'comp':
            if (colorSet.compTagTextColor) text = colorSet.compTagTextColor;
            if (colorSet.compTagTextBgColor) bgtext = colorSet.compTagTextBgColor;
            this.subjectForm.compTagColorsStr = text + ' | ' + bgtext;
            break;
          case 'eval':
            if (colorSet.evalTagTextColor) text = colorSet.evalTagTextColor;
            if (colorSet.evalTagTextBgColor) bgtext = colorSet.evalTagTextBgColor;
            this.subjectForm.evalTagColorsStr = text + ' | ' + bgtext;
            break;
          case 'manual':
            if (colorSet.manualTagTextColor) text = colorSet.manualTagTextColor;
            if (colorSet.manualTagTextBgColor) bgtext = colorSet.manualTagTextBgColor;
            this.subjectForm.manualTagColorsStr = text + ' | ' + bgtext;
            break;
        }
        return text + ' | ' + bgtext;
      }
    },
  },

  methods: {
    //获取画像主题配置项DO
    getAupSubjectDO() {
      let url = (this.mode === 'add') ? this.commonUrl.URL_GET_AUP_SUBJECT_DO4_ADD
        : this.commonUtil.fillUrlArgments(this.commonUrl.URL_GET_AUP_SUBJECT_DO4_UPDATE, this.curKey);
      this.appAxios("GET", url).then(result => {
        if (result == null) return;

        this.subjectDO = result.data;
        if (this.mode === 'edit') {
          this.subjectForm = result.data.subject;
        }
      })
    },

    handleOpenDialog() {
      switch (this.mode) {
        case 'add':
          this.title = "新增主题";
          break;
        case 'edit':
          this.title = "编辑主题";
          break;
      }
      
      this.subjectDO = {};
      this.subjectForm = {
        getherTagSetKeyList: [],
        compTagSetKeyList: [],
        evalTagSetKeyList: [],
        renderTagSetList: [{}],
        tagColorSet: {},
        compTagColorsStr: '',
        evalTagColorsStr: '',
        manualTagColorsStr: ''
      },
      this.refreshFlag = false;
      
      this.getAupSubjectDO();
    },

    handleAddLine() {
      if (this.subjectForm.renderTagSetList.length >= 3) {
        this.$message({ message: '展现标签集最多只能设置3条', type: 'warning' });
        return;
      }

      this.subjectForm.renderTagSetList.push({});
    },

    handleDelLine(index) {
      this.subjectForm.renderTagSetList.splice(index, 1);
    },

    handleSave() {
      this.$refs['subjectForm'].validate((valid) => {
        if (!valid) return false;

        let data = JSON.parse(JSON.stringify(this.subjectForm));
        delete data.compTagColorsStr;
        delete data.evalTagColorsStr;
        delete data.manualTagColorsStr;
        
        let url = (this.mode === 'add') ? this.commonUrl.URL_SAVE_AUP_SUBJECT : this.commonUrl.URL_UPDATE_AUP_SUBJECT;
        let method = (this.mode === 'add') ? "POST" : "PUT";
        this.appAxios(method, url, data).then(result => {
          if (result == null) return;

          this.refreshFlag = true;
          this.handleCloseDialog();
        })
      })
    },

    handleCloseDialog() {
      this.$refs['subjectForm'].resetFields();
      this.$emit("close", this.refreshFlag);
    }
  },

  created() {}
}
</script>

<style scoped>
.color-block {
  margin-top: 6px;
  margin-right: 8px;
  padding: 3px;
  width: 150px; 
  height: 18px;
  line-height: 18px;
  text-align: center;
}
</style>