<template>
  <div class="app-container">
    <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="68px">
      <el-form-item label="任务名称" prop="customerClueTaskName">
        <el-input
          v-model="queryParams.customerClueTaskName"
          clearable
          placeholder="请输入任务名称"
          size="mini"
          @keyup.enter.native="handleQuery"
        />

      </el-form-item>
      <el-form-item label="客资线索" prop="clueTypes">
        <el-select v-model="queryParams.clueTypes" clearable collapse-tags multiple placeholder="请选择客资线索"
                   size="mini">
          <el-option
            v-for="item in summaryTaskOptions"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue">
          </el-option>
        </el-select>
      </el-form-item>
<!--      <el-form-item label="生效时间" prop="datetimerange">-->
<!--        <el-date-picker-->
<!--          v-model="datetimerange"-->
<!--          align="left"-->
<!--          end-placeholder="结束日期"-->
<!--          range-separator="至"-->
<!--          start-placeholder="开始日期"-->
<!--          style="width: 240px"-->
<!--          type="daterange"-->
<!--          size="mini"-->
<!--          value-format="yyyy-MM-dd">-->
<!--        </el-date-picker>-->
<!--      </el-form-item>-->
      <el-form-item>
        <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['sfa:summaryTask:add']"
          icon="el-icon-plus"
          plain
          size="mini"
          type="primary"
          @click="handleAdd"
        >新增
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="summaryTaskList">
      <el-table-column  label="任务名称" prop="customerClueTaskName"/>
      <el-table-column  align="center" label="客资线索" prop="clueType">
        <template slot-scope="scope">
          <span>{{ fillObjectFormat(scope.row, scope.column) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建时间" prop="stopTime" >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" class-name="small-padding fixed-width" label="操作" width="160px">
        <template slot-scope="scope">
          <el-button
            v-hasPermi="['sfa:summaryTask:edit']"
            icon="el-icon-edit"
            size="mini"
            type="text"
            @click="handleUpdate(scope.row)"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="previewFn(scope.row)"
          >预览</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :limit.sync="queryParams.pageSize"
      :page.sync="queryParams.pageNum"
      :total="total"
      @pagination="getList"
    />
    <!-- 添加或修改主管任务配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" append-to-body width="720px">
      <el-form ref="form" :model="form" :rules="rules" label-width="90px" >
        <el-form-item label="任务名称" prop="customerClueTaskName">
          <el-input v-model="form.customerClueTaskName" :disabled="status" placeholder="请输入任务名称" size="mini"/>
        </el-form-item>
        <el-form-item label="客资线索" prop="clueType">
          <el-select v-model="form.clueType" clearable  placeholder="请选择客资线索" style="width: 100%;" size="mini">
            <el-option
              v-for="item in summaryTaskOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <div >
          <el-divider>答题内容设置</el-divider>
          <el-card class="box-card el-zcard" shadow="never" v-for="(item,index)  in form.customerClueItemList" :key="index">
              <div>
                <el-form-item :label="index+1+'.答题类型'"  :prop="'customerClueItemList.' + index +'.answerType'" :rules="rules.answerType">
                  <el-select v-model="item.answerType" :disabled="status" clearable placeholder="请选择答题类型" size="mini" @change="answerTypeChange(index)" style="width: 88%;">
                    <el-option
                      v-for="item in answerTypeOptions"
                      :key="item.dictValue"
                      :label="item.dictLabel"
                      :value="item.dictValue">
                    </el-option>
                  </el-select>
                  <span class="el-icon-circle-plus-outline addBtn" @click="addTypeFn"></span>
                  <span  v-show="form.customerClueItemList.length>1"  class="el-icon-remove-outline addBtn" @click="reduceTypeFn(index)"></span>
                </el-form-item>
                <el-form-item class="collectionForm1" label="标题"  :prop="'customerClueItemList.' + index +'.customerClueName'" :rules="rules.customName">
                  <el-input v-model="item.customerClueName" :disabled="status" placeholder="请输入标题" size="mini"/>
                </el-form-item>
                <el-form-item label="是否必填" :prop="'customerClueItemList.' + index +'.isMust'" :rules="rules.isMust">
                  <el-radio-group :disabled="status" v-model="item.isMust" size="mini">
                    <el-radio label="0">是</el-radio>
                    <el-radio label="1">否</el-radio>
                  </el-radio-group>
                </el-form-item>
                <div v-for="(itemlist,indexlist) in item.customerClueOptionList" :key="indexlist" class="collectionForm1">
                  <div v-show="item.answerType == 'dx' || item.answerType == 'duox'">
                    <div v-show="indexlist==0">
                      <el-form-item :prop="'customerClueItemList.'+index+'.customerClueOptionList.' + indexlist +'.customerClueOption'" :rules="rules.collectionOption" label="选项">
                        <el-input :disabled="status" v-model="itemlist.customerClueOption" clearable placeholder="请输入内容" size="mini"/>
                        <span class="el-icon-circle-plus-outline addBtn" @click="addFn(index)"></span>
                        <span v-show="item.customerClueOptionList.length>2" class="el-icon-remove-outline addBtn" @click="reduceFn(index,indexlist)"></span>
                      </el-form-item>
                    </div>
                    <div v-show="indexlist != 0">
                      <el-form-item :prop="'customerClueItemList.'+index+'.customerClueOptionList.' + indexlist +'.customerClueOption'" :rules="rules.collectionOption" label="">
                        <el-input :disabled="status" v-model="itemlist.customerClueOption" clearable placeholder="请输入内容" size="mini"/>
                        <span class="el-icon-circle-plus-outline addBtn" @click="addFn(index)"></span>
                        <span v-show="item.customerClueOptionList.length>2" class="el-icon-remove-outline addBtn" @click="reduceFn(index,indexlist)"></span>
                      </el-form-item>
                    </div>
                  </div>
                </div>
                <div v-show="item.answerType != 'dx'&&item.answerType != 'duox'">
                  <el-form-item :prop="'customerClueItemList.'+index+'.remark'" :rules="rules.remark" label="备注">
                    <el-input :disabled="status" v-model="item.remark" clearable placeholder="请输入内容" size="mini"/>
                  </el-form-item>
                </div>
              </div>
          </el-card>

        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" size="mini">确 定</el-button>
        <el-button @click="cancel" size="mini">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="title" :visible.sync="viewOpen" append-to-body width="720px">
      <el-form ref="form" :model="form"  label-width="90px" >
        <el-form-item label="任务名称" prop="customerClueTaskName">
          <el-input v-model="form.customerClueTaskName" disabled size="mini"/>
        </el-form-item>
        <el-form-item label="客资线索" prop="clueType">
          <el-select v-model="form.clueType" clearable disabled placeholder="请选择客资线索" style="width: 100%;" size="mini">
            <el-option
              v-for="item in summaryTaskOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <div>
          <el-divider>答题预览</el-divider>
          <el-card class="box-card el-zcard el-zcards" shadow="never" v-for="(item,index)  in form.customerClueItemList" :key="index">
              <el-form-item>
                  <span class="font-red" v-if="item.isMust == 0">*</span>{{index+1+'、'+item.customerClueName}}
                  <icon :answerType="item.answerType"></icon>
              </el-form-item>
                <el-form-item v-show="item.answerType == 'duox'">
                  <checkbox :checkboxValF="item.answer" :checkboxOptions="item.customerClueOptionList"></checkbox>
                </el-form-item>
                <el-form-item v-show="item.answerType == 'dx'">
                  <radio  :radioValF="item.answer" :radioOptions="item.customerClueOptionList"></radio>
                </el-form-item>
              <div v-show="item.answerType != 'dx'&&item.answerType != 'duox'&&item.remark">
                <el-form-item :prop="'customerClueItemList.'+index+'.remark'">
                  <p class="textinfo">注：{{item.remark}}</p>
                </el-form-item>
              </div>
          </el-card>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelView" size="mini">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getSummaryTask,
  delSummaryTask,
  updateSummaryTask,
} from "@/api/sfa/summaryTask";
import checkbox from "@/views/components/sfa/checkboxs1";
import radio from "@/views/components/sfa/radios1";
import icon from "@/views/components/sfa/icon";
import {softRemove} from "@/api/sfa/task";
import {addCustomerClue, getCustomerClue, listCustomerClue, updateCustomerClue} from "@/api/sfa/capital";
export default {
  name: "SummaryTask",
  dicts: ['customer_clue', 'sfa_publish_type'],
  components: { radio,checkbox,icon },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 主管任务配置表格数据
      summaryTaskList: [],
      //起止时间
      datetimerange: [],
      //填写对象
      summaryTaskOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        summaryTaskName: null,

        fillObject: null,
        startTime: null,
        stopTime: null,
        status: null,
      },
      answerTypeOptions: [

        {
        "searchValue": null,
        "createBy": "admin",
        "createTime": "2021-12-14 13:53:13",
        "updateBy": null,
        "updateTime": null,
        "remark": "单选",
        "params": {},
        "pageSize": null,
        "pageNum": null,
        "dictCode": 170,
        "dictSort": 0,
        "dictLabel": "单选",
        "dictValue": "dx",
        "dictType": "sfa_collection_answer_type",
        "cssClass": null,
        "listClass": "default",
        "isDefault": "N",
        "status": "0",
        "default": false
      }, {
        "searchValue": null,
        "createBy": "admin",
        "createTime": "2021-12-14 13:53:47",
        "updateBy": null,
        "updateTime": null,
        "remark": "多选",
        "params": {},
        "pageSize": null,
        "pageNum": null,
        "dictCode": 171,
        "dictSort": 1,
        "dictLabel": "多选",
        "dictValue": "duox",
        "dictType": "sfa_collection_answer_type",
        "cssClass": null,
        "listClass": "default",
        "isDefault": "N",
        "status": "0",
        "default": false
      }, {
        "searchValue": null,
        "createBy": "admin",
        "createTime": "2021-12-14 13:54:17",
        "updateBy": null,
        "updateTime": null,
        "remark": "文本",
        "params": {},
        "pageSize": null,
        "pageNum": null,
        "dictCode": 172,
        "dictSort": 2,
        "dictLabel": "文本",
        "dictValue": "wb",
        "dictType": "sfa_collection_answer_type",
        "cssClass": null,
        "listClass": "default",
        "isDefault": "N",
        "status": "0",
        "default": false
      }, {
          "searchValue": null,
          "createBy": "admin",
          "createTime": "2021-12-14 13:54:17",
          "updateBy": null,
          "updateTime": null,
          "remark": "表格",
          "params": {},
          "pageSize": null,
          "pageNum": null,
          "dictCode": 172,
          "dictSort": 2,
          "dictLabel": "表格",
          "dictValue": "bg",
          "dictType": "sfa_collection_answer_type",
          "cssClass": null,
          "listClass": "default",
          "isDefault": "N",
          "status": "0",
          "default": false
        }, {
        "searchValue": null,
        "createBy": "admin",
        "createTime": "2022-01-26 01:50:59",
        "updateBy": null,
        "updateTime": null,
        "remark": "照片",
        "params": {},
        "pageSize": null,
        "pageNum": null,
        "dictCode": 221,
        "dictSort": 3,
        "dictLabel": "照片",
        "dictValue": "zp",
        "dictType": "sfa_collection_answer_type",
        "cssClass": null,
        "listClass": "default",
        "isDefault": "N",
        "status": "0",
        "default": false
      }, {
        "searchValue": null,
        "createBy": "admin",
        "createTime": "2022-02-08 06:24:18",
        "updateBy": null,
        "updateTime": null,
        "remark": "数字",
        "params": {},
        "pageSize": null,
        "pageNum": null,
        "dictCode": 248,
        "dictSort": 4,
        "dictLabel": "数字",
        "dictValue": "sz",
        "dictType": "sfa_collection_answer_type",
        "cssClass": null,
        "listClass": "default",
        "isDefault": "N",
        "status": "0",
        "default": false
      }, {
        "searchValue": null,
        "createBy": "admin",
        "createTime": "2022-02-08 06:24:18",
        "updateBy": null,
        "updateTime": null,
        "remark": "日期",
        "params": {},
        "pageSize": null,
        "pageNum": null,
        "dictCode": 248,
        "dictSort": 4,
        "dictLabel": "日期",
        "dictValue": "rq",
        "dictType": "sfa_collection_answer_type",
        "cssClass": null,
        "listClass": "default",
        "isDefault": "N",
        "status": "0",
        "default": false
      }],
      // 表单参数
      form: {
        datetimerange:[],
        customerClueItemList:[
          {
            answerType:"",
            customerClueName:"",
            isMust:"",
            remark:"",
            customerClueOptionList: [
              {collectionOption: ''}
            ],
          }
        ],
      },
      // 表单校验
      rules: {
        customerClueTaskName: [
          {required: true, message: "任务名称不能为空", trigger: "blur"}
        ],
        clueType: [
          {required: true, message: "客资线索不能为空", trigger: "change"}
        ],
        isMust: [{required: true, message: '请选择是否必填', trigger: 'change'}],
        isValid: [{required: true, message: '请选择是否有效', trigger: 'change'}],
        isPicture: [{required: true, message: '请选择是否支持图片', trigger: 'change'}],
        isMustPicture: [{required: true, message: '请选择图片是否必填', trigger: 'change'}],
        answerType: [{required: true, message: '请选择回答类型', trigger: 'change'}],
        collectionOption: [{required: true, message: '请输入选项内容', trigger: 'blur'}],
        customName:[{required: true, message: '请输入标题', trigger: 'blur'}],

      },
      fillObject: [],
      viewOpen:false,
      status:false
    };
  },
  created() {
    this.getDicts("customer_clue").then(response => {
      this.summaryTaskOptions = response.data;
    });
    this.getList();
  },
  methods: {
    addTypeFn() {
      this.form.customerClueItemList.push({
        answerType: "",
        customerClueName: "",
        isMust: "",
        remark: "",
        customerClueOptionList: [
          {customerClueOption: ''}
        ],
      })
    },
    reduceTypeFn(index) {
      this.form.customerClueItemList.splice(index, 1);
    },
    // 回答类型改变
    answerTypeChange(val) {
      console.log(val)
      this.form.customerClueItemList[val].remark = ""

      if (this.form.customerClueItemList[val].answerType != 'dx' && this.form.customerClueItemList[val].answerType != 'duox') {
        this.form.customerClueItemList[val].customerClueOptionList = [];
      } else {
        if (this.form.customerClueItemList[val].customerClueOptionList.length < 1) {
          this.form.customerClueItemList[val].customerClueOptionList.push({customerClueOption: ''})
        }
      }
      this.$forceUpdate();
    },
    addFn(index) {
      this.form.customerClueItemList[index].customerClueOptionList.push({customerClueOption: ''});
    },
    reduceFn(index, itemIndex) {
      this.form.customerClueItemList[index].customerClueOptionList.splice(itemIndex, 1);
    },
    /** 查询主管任务配置列表 */
    getList() {
      this.loading = true;
      if(this.queryParams.customerClueTaskName!=null){
        this.queryParams.customerClueTaskName=this.queryParams.customerClueTaskName.trim()
      }
      listCustomerClue(this.queryParams).then(response => {
        this.summaryTaskList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 填写对象
    fillObjectFormat(row, column) {
      if (row.clueType != null) {
        return this.selectDictLabels(this.summaryTaskOptions, row.clueType);
      } else {
        return ""
      }
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        customerClueId: null,
        customerClueTaskName: null,
        clueType: null,
        fillObject: null,
        startTime: null,
        stopTime: null,
        status: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        delFlag: null,
        datetimerange: [],
        customerClueItemList: [
          {
            customerClueOptionList: [
              {customerClueOption: ''}
            ],
          }
        ],
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      if (this.datetimerange == null || this.datetimerange == []) {
        this.queryParams.startTime = '';
        this.queryParams.stopTime = '';
      } else {
        this.queryParams.startTime = this.datetimerange[0];
        this.queryParams.stopTime = this.datetimerange[1];
      }
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.datetimerange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.status = false
      this.form.status = "0";
      this.open = true;
      this.title = "添加客资跟进任务配置";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const summaryId = row.customerClueId || this.ids
      getCustomerClue(summaryId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改客资跟进任务配置";
      });
    },
    previewFn(row) {
      this.reset();
      const summaryId = row.customerClueId || this.ids
      getCustomerClue(summaryId).then(response => {
        this.form = response.data;
        this.viewOpen = true;
        this.title = "客资跟进任务配置详情";
      });
    },
    cancelView() {
      this.viewOpen = false;
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.customerClueId != null) {
            updateCustomerClue(this.form).then(response => {
              if(response.code==200){
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
              }
            });
          } else {
            addCustomerClue(this.form).then(response => {
              if(response.code==200){
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
              }
            });
          }
        }
      });
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const summaryIds = row.summaryId || this.ids;
      let that = this;
      this.$modal.confirm('是否确认删除客资跟进任务配置编号为"' + summaryIds + '"的数据项？').then(function () {
        return delSummaryTask(summaryIds).then(response => {
          if(response.code==200){
            that.$modal.msgSuccess("删除成功");
            that.getList();
          }
        });
      })
    },
  }
};
</script>
<style scoped>
.addBtn {
  font-size: 18px;
  margin-left: 10px;
  cursor: pointer;
  color: #409eff;
}
.font-red {
  color: #ff4949;
  position: absolute;
  left: -8px;
  top: 2px;
}
</style>
