<template>
  <!--根据客户意向打标签 -->
  <div class="card">
    <div class="tagHead">
      <div class="left">
        <div class="title">{{ text.title }}</div>
        <el-switch v-model="form.labelFlag" />
        <div class="tips" v-show="text.tips">{{ text.tips }}</div>
      </div>
      <el-button type="text">{{ text.explanation }}</el-button>
    </div>
    <div v-show="form.labelFlag">
      <div class="tagBody">
        <table>
          <thead>
            <tr>
              <th class="tableHead" v-for="(item, index) in tableColumn" :key="index">{{ item.text }}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in tableData" :key="index">
              <td class="tagSelectCell" style="width:420px">
                <el-select filterable v-model="item.options" placeholder="请选择意向等级（多选）" @change="effectActionChange">
                  <el-option v-for="item in options" :key="item.aiTemplateId" :label="item.name" :value="item.aiTemplateId"></el-option>
                </el-select>
              </td>
              <td class="tagSelectCell" style="width:170px">
                <el-button type="text" v-if="!Object.keys(item.labels).length" @click="openTagsDialog(index)">选择标签</el-button>
                <el-tag type="mini" v-else closable @close="handleTagClose(item.id)">{{ item.labels.name }}</el-tag>
              </td>
              <td class="tagSelectCell">
                <div class="delIcon" type="text" @click="delTagList(index)">
                  <i class="iconfont icon-Delete"></i>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="tagFooter">
        <el-button type="text" @click="addGrade"> <i class="iconfont icon-Plus"></i> {{ text.addText }} </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    options: {
      type: Array,
      default: () => []
    },
    text: {
      type: Object,
      default: () => {
        return {
          title: '客户意向等级',
          tips: '开启后，可提高接通率',
          explanation: '意向等级说明',
          addText: '添加等级'
        };
      }
    },
    tableColumn: {
      type: Array,
      default: () => [
        {
          text: '客户意向等级',
          prop: 'options'
        },
        {
          text: '选择标签',
          prop: 'select'
        },
        {
          text: '操作',
          prop: 'operate'
        }
      ]
    }
  }
};
</script>

<style lang="scss" scoped>
.card {
  width: 730px;
  background: #f7f8fa;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 20px;
  &:first-child {
    margin-top: 0;
  }
  .tagHead {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 20px;
    .left {
      display: flex;
      align-items: center;
      .title {
        width: 173px;
        margin-right: 15px;
      }
    }
  }
  .tagBody {
    border-top: 1px solid #e4e7ed;
    box-sizing: border-box;
    padding: 0 20px;
    table {
      width: 100%;
    }
    .tagSelectCell {
      padding: 0 30px 12px 0;
    }
  }
  .tagFooter {
    padding: 0 20px 17px 20px;
  }
  .tableHead {
    text-align: left;
    font-weight: bold;
    line-height: 20px;
    color: #303133;
    font-size: 14px;
    height: 52px;
    line-height: 52px;
  }
}
</style>
