<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible.sync="addOrEditDialogFlag"
    :title="title"
    :append-to-body="false"
    :close-on-click-modal="false"
    width="1000px"
    :before-close="cancel"
  >
    <el-form
      ref="form"
      :rules="rules"
      class="el-form-box"
      :model="form"
      label-width="90px"
    >
      <headerTitle title="基本信息"></headerTitle>
      <el-row>
        <el-col :span="8">
          <el-form-item label="编码" prop="code">
            <el-input v-model="form.code" disabled></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="考核指标" prop="assessmentIndicators">
            <el-select
              @change="salesChange"
              v-model="form.assessmentIndicators"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="描述" prop="describes">
            <el-input v-model="form.describes" type="textarea"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <headerTitle title="考核指标限制条件"></headerTitle>
      <el-row>
        <el-col
          :span="24"
          v-for="(item, i) in tableList"
          :key="i"
          style="margin-top: 15px"
        >
          <div class="itemDiv">
            <div class="left">
              <span
                >且（AND）
                <i
                  v-show="i == 0"
                  style="color: #fff; font-size: 16px; margin-bottom: 5px"
                  class="el-icon-circle-close"
                ></i>
                <i
                  v-show="i != 0"
                  style="color: red; font-size: 16px; margin-bottom: 5px"
                  class="el-icon-circle-close"
                  @click="del(i)"
                ></i
              ></span>
              <i class="leftLine"></i>
              <div class="rightLine">
                <i v-for="(val, index) in item" :key="index"></i>
                <i></i>
                <!-- <i></i> -->
              </div>
            </div>
            <div class="right">
              <div
                class="rightItem"
                v-for="(val, index) in item"
                :key="index"
                :style="{ marginTop: index == 0 ? '' : '20px' }"
              >
                <el-select
                  v-model="val.value"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in valueOptions"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                    @click.native="valChange(item, val)"
                  >
                  </el-option>
                </el-select>
                <el-select
                  v-model="val.operator"
                  placeholder="请选择"
                  style="width: 100%; margin-left: 8px"
                >
                  <el-option
                    v-for="item in operatorOptions"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>

                <el-select
                  v-model="val.status"
                  multiple
                  placeholder="请选择"
                  style="width: 100%; margin-left: 8px"
                >
                  <el-option
                    v-for="item in val.statusOptions"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
                <i
                  v-show="index == 0"
                  style="color: #fff; font-size: 16px; margin-left: 5px"
                  class="el-icon-circle-close"
                ></i>
                <i
                  v-show="index != 0"
                  style="color: red; font-size: 16px; margin-left: 5px"
                  class="el-icon-circle-close"
                  @click="delItem(item, index)"
                ></i>
              </div>
              <div style="margin-top: 20px" class="rightItem">
                <i
                  @click="addItem(item)"
                  class="el-icon-circle-plus-outline"
                ></i>
              </div>
              <!-- <div style="margin-top: 20px" class="rightItem">
                <el-input v-model="form.branchName"></el-input
              ></div> -->
            </div>
          </div>
          <el-divider>或</el-divider>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label-width="50px"
            prop="branchName"
            style="margin-top: 15px"
          >
            <el-button
              size="small"
              type="primary"
              icon="el-icon-plus"
              class="ele-btn-icon"
              @click="add()"
            >
              继续添加筛选器
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer">
      <el-button type="primary" @click="handleSave(0)" v-click-once>保存</el-button>
      <el-button @click="cancel">返回</el-button>
    </div>
  </ele-modal>
</template>
<script>
import { mapGetters } from 'vuex';
import { targetDefinitionSave } from '@/api/targetManage/index.js';
import {
  salesRegulationOption,
  assessmentIndicatorsOptions
} from '@/views/targetManage/util.js';

const defForm = {
  name: '',
  assessmentIndicators: '',
  assessmentCriteria: [], //条件
  status: '',
  type: '',
  describes: ''
};
export default {
  components: {},

  computed: {
    ...mapGetters(['user'])
  },
  data() {
    return {
      addOrEditDialogFlag: false,
      dialogType: '',
      title: '',
      form: {
        ...defForm
      },
      tableList: [],
      valueOptions: [],
      operatorOptions: [
        {
          name: '属于',
          value: '1'
        },
        {
          name: '不属于',
          value: '2'
        }
      ],
      options: assessmentIndicatorsOptions,
      rules: {
        name: { required: true, message: '请输入', trigger: 'change' },
        assessmentIndicators: {
          required: true,
          message: '请选择',
          trigger: 'change'
        }
      }
    };
  },
  created() {},
  methods: {
    //初始化
    async open(row = {}, type) {
      this.addOrEditDialogFlag = true;
      this.title = type == 'add' ? '新增' : '修改';
      this.dialogType = type;
      if (type !== 'add') {
        this.form = JSON.parse(JSON.stringify(row));
        this.tableList = this.form.assessmentCriteria;
        const { valueOption } = salesRegulationOption(
          this.form.assessmentIndicators
        );
        this.valueOptions = valueOption;
      } else {
        this.add();
      }
    },
    addItem(item) {
      item.push({
        value: '',
        operator: '1',
        status: [],
        statusOptions: []
      });
    },
    delItem(item, i) {
      item.splice(i, 1);
    },
    del(i) {
      this.tableList.splice(i, 1);
    },

    add() {
      this.tableList.push([
        {
          value: '',
          operator: '1',
          status: [],
          statusOptions: []
        }
      ]);
    },

    salesChange(val) {
      const { valueOption, statusOption } = salesRegulationOption(val);
      this.valueOptions = valueOption;
      this.statusOptions = statusOption;
      this.tableList.forEach((item) => {
        item.forEach((_item) => {
          _item.status = [];
          _item.statusOptions = [];
          _item.value = '';
        });
      });
    },
    valChange(item, val) {
      const { statusOption } = salesRegulationOption(
        this.form.assessmentIndicators,
        item.value
      );
      val.statusOptions = statusOption;
      val.status = [];
    },
    //获取详情
    async getFeeApplyInfoInfo(id) {
      this.form = await getSettlementAccountInfoAPI(id);
    },
    handleSave(flag) {
      this.$refs.form.validate(async (valid) => {
        if (!valid) return this.$message.warning('有必填项未填，请检查');
        let isTrue = true;
        this.tableList.forEach((item) => {
          item.forEach((val) => {
            if (!val.value || val.status.length == 0) {
              isTrue = false;
            }
          });
        });
        if (!isTrue) {
          return this.$message.warning('请完善考核指标限制条件');
        }
        this.form.assessmentCriteria = this.tableList;
        const id = await targetDefinitionSave(this.form);
        if (flag) {
          await this.handleSub(id);
        }
        this.$message.success('操作成功');
        this.done();
        this.cancel();
      });
    },

    //刷新主列表数据
    done() {
      this.$emit('reload');
    },
    //关闭弹窗
    cancel() {
      this.form = {
        ...defForm
      };
      this.tableList = [];
      this.addOrEditDialogFlag = false;
    }
  }
};
</script>
<style scoped lang="scss">
.itemDiv {
  display: flex;
  .left {
    display: flex;
    align-items: center;
    span {
      height: 100%;
      display: flex;
      align-items: center;
    }
    .leftLine {
      height: calc(100% - 30px);
      width: 1px;
      background: #dddddd;
      margin-left: 10px;
    }
    .rightLine {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: calc(100% - 30px);

      i {
        height: 1px;
        width: 20px;
        background: #dddddd;
      }
    }
  }
  .right {
    display: flex;
    flex-direction: column;
    width: calc(100% - 150px);
  }
  .rightItem {
    height: 45px;
    display: flex;
    align-items: center;
    i {
      font-size: 28px;
      color: #ddd;
      cursor: pointer;
    }
  }
}
</style>
