<template>
  <div class="industry-mark">
    <!-- 添加行业 -->
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      center
      title="添加产业"
      :visible.sync="addIndustryDlg"
      customClass="custom-addIndustryMark"
      :before-close="confirmIndustry"
    >
      <div v-if="optionFormregion === '研选'">
        <p>所属行业：{{ optionFormregion }}</p>
        <el-input v-model="inputIndustry" maxlength="10" placeholder="请输入产业名称（最多输入10个字）"></el-input>
      </div>
      <div v-else>
        <el-form :model="addIndustryForm" :rules="industryAdd" ref="addIndustryRef">
          <el-form-item prop="tradeValue">
            <el-select placeholder="请选择行业" style="width: 100%" clearable v-model="addIndustryForm.tradeValue" @change="changeHandel" @focus="chartPermission">
              <el-option v-for="item in chartPermissionList" :label="item.PermissionName" :key="item.ChartPermissionId" :value="item.ChartPermissionId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="industryName">
            <el-input style="width: 100%" placeholder="请输入产业名称（最多输入10个字）" v-model="addIndustryForm.industryName" maxlength="10"></el-input>
          </el-form-item>
          <el-form-item prop="recommendedIndex">
            <el-input style="width: 100%; margin-top: 20px" placeholder="请设置推荐指数（0-100）" v-model="addIndustryForm.recommendedIndex"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="commitIndustry">确定</el-button>
        <el-button @click="confirmIndustry">取消</el-button>
      </span>
    </el-dialog>

    <!-- 添加标的 -->
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      center
      title="添加标的"
      :visible.sync="addMarkDlg"
      customClass="custom-addIndustryMark"
      :before-close="confirmMark"
    >
      <div>
        <p>所属产业：{{ addMarkUpVal.industrialName }}</p>
        <div v-for="(item, index) in mark" :key="index">
          <el-input v-model="item.name" maxlength="6" placeholder="请输入标的名称（最多输入6个字）"></el-input>
        </div>
        <div class="add-mark" @click="addMarkInput"><img src="~@/assets/img/set_m/add_ico.png" /> 继续添加</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="commitMark">确定</el-button>
        <el-button @click="confirmMark">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { raiInterface } from "@/api/api.js";
export default {
  name: "",
  components: {},
  props: {
    addIndustryDlg: {
      type: Boolean,
      default: false,
    },
    addMarkDlg: {
      type: Boolean,
      default: false,
    },
    optionFormregion: {
      type: String,
    },
    addMarkUpVal: {
      type: Object,
      default: {},
    },
    source: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      inputIndustry: "",
      mark: [{ name: "" }],
      chartPermissionList: [],
      addIndustryForm: {
        //添加产业分类
        tradeValue: "",
        industryName: "",
        recommendedIndex: null,
      },
      industryAdd: {
        industryName: [{ required: true, message: "请输入产业名称（最多输入10个字）", trigger: "blur" }],
        recommendedIndex: [{ required: true, message: "请输入推荐指数", trigger: "blur" }],
        tradeValue: [{ required: true, message: "请选择行业", trigger: "change" }],
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    //获取行业
    chartPermission() {
      raiInterface.chartPermissionFirstHaveIco().then((res) => {
        if (res.Ret === 200) {
          this.chartPermissionList = res.Data.List;
        }
      });
    },
    //添加行业的确定事件
    async commitIndustry() {
      if (this.optionFormregion != "研选") {
        this.$refs.addIndustryRef.validate(async (val) => {
          if (val) {
            //添加产业
            const res = await raiInterface.industrialManagement({
              IndustryName: this.addIndustryForm.industryName,
              RecommendedIndex: this.addIndustryForm.recommendedIndex - 0,
              ChartPermissionId: this.addIndustryForm.tradeValue,
            });
            if (!res.Success) return;
            this.$emit("commitIndustryDlg", res.Data);
            this.$message.success("添加成功！");
            this.confirmIndustry();
          }
        });
      } else {
        if (this.inputIndustry) {
          const res = await raiInterface.industrialManagement({
            Source: this.source,
            IndustryName: this.inputIndustry,
            PermissionName: this.optionFormregion,
          });
          if (res.Ret === 200) {
            this.$emit("commitIndustryDlg", res.Data);
            this.$message.success("添加成功！");
            this.confirmIndustry();
          }
        } else {
          this.$message.error("请输入产业！");
        }
      }
    },
    //添加行业的取消事件
    confirmIndustry() {
      this.inputIndustry = "";
      this.$emit("update:addIndustryDlg", false);
    },
    //添加标的的确定事件
    async commitMark() {
      let arr = [];
      this.mark.forEach((item) => {
        if (item.name) {
          arr.push(item.name);
        }
      });
      if (!arr.length) return this.$message.error("请输入标的！");
      const res = await raiInterface.industrialSubjectAdd({
        IndustrialManagementId: this.addMarkUpVal.industrialId,
        Source: this.source,
        SubjectName: arr.join(",").replace(/,/g, "{|}"),
      });
      if (res.Ret === 200) {
        this.$emit("commitMarkDlg", res.Data.NewId);
        this.$message.success("添加成功！");
        this.confirmMark();
      }
    },
    //添加标的的取消事件
    confirmMark() {
      this.mark = [{ name: "" }];
      this.$emit("update:addMarkDlg", false);
    },
    //添加标的的输入框
    addMarkInput() {
      this.mark.push({ name: "" });
    },
  },
};
</script>
<style lang="scss">
.industry-mark {
  .custom-addIndustryMark {
    width: 500px;
    .el-dialog__footer {
      margin-top: 20px;
    }
  }
  .el-input {
    width: 100%;
    margin-top: 20px;
  }
  .add-mark {
    display: flex;
    align-items: center;
    margin-top: 20px;
    color: #409eff;
    img {
      margin-right: 15px;
    }
  }
}
</style>
