<template>
  <div v-loading="loading">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="150px" class="order_form">
      <el-form-item label="外呼任务">
        <el-radio-group v-model="outboundTaskRadio" @change="radioChangeTask">
          <el-radio :label="1">已有任务</el-radio>
          <el-radio :label="2">新建任务</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="任务人" prop="F_TaskUser">
        <el-select v-model="ruleForm.F_TaskUser" class="form_select" clearable filterable >
          <el-option
            v-for="item in roleOptions"
            :key="item.F_UserCode"
            :label="item.F_UserCode"
            :value="item.F_UserCode">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="任务状态" prop="F_State">
        <el-select v-model="ruleForm.F_State" class="form_select" clearable filterable>
          <el-option label="未启动" value="0"></el-option>
          <el-option label="启动" value="1"></el-option>
          <el-option label="暂停" value="2"></el-option>
          <el-option label="终止" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="任务名称" prop="F_Name">
        <el-input v-model="ruleForm.F_Name" placeholder="请输入任务名称" />
      </el-form-item>
      <el-form-item label="任务时间" prop="F_Time">
        <el-date-picker
          v-model="ruleForm.F_Time"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          class="form_date"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="外呼类型" prop="F_Type">
        <el-select v-model="ruleForm.F_Type" class="form_select" clearable filterable @change="handleChangeType" >
          <el-option label="语音外呼" value="1"></el-option>
          <el-option label="坐席外呼" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="外呼内容" prop="F_Content" v-show="displayContent">
        <el-input v-model="ruleForm.F_Content" placeholder="请输入外呼内容"/>
      </el-form-item>
      <el-form-item label="任务说明" prop="F_Remarks">
        <el-input v-model="ruleForm.F_Remarks" placeholder="请输入任务说明" />
      </el-form-item>
      <el-form-item label="外呼任务" prop="productName" v-show="displayOutboundTask">
        <el-table
          v-loading="loading"
          :data="taskDataLists"
          border
          stripe
          highlight-current-row
          @current-change="handleCurrentChangeTask"
        >
          <el-table-column type="index" label="编号" align="center" fixed width="80" />
          <el-table-column prop="F_TaskUser" label="任务人" align="center" min-width />
          <el-table-column prop="F_State" label="任务状态" align="center">
            <template slot-scope="scope">{{ scope.row.F_State | judgmentState }}</template>
          </el-table-column>
          <el-table-column prop="F_Name" label="任务名称" align="center" />
          <el-table-column prop="F_StartTime" label="任务开始时间" align="center" />
          <el-table-column prop="F_EndTime" label="任务结束时间" align="center" />
          <el-table-column prop="F_Type" label="外呼类型" align="center">
            <template slot-scope="scope">
              {{ scope.row.F_Type | judgmentType }}
            </template>
          </el-table-column>
          <el-table-column prop="F_Content" label="外呼内容" align="center" />
          <el-table-column prop="F_Remarks" label="任务说明" align="center" />
        </el-table>
        <pagination
          v-show="(pageParams.total > 0)"
          :total="pageParams.total"
          :pageindex.sync="pageParams.pageindex"
          :pagesize.sync="pageParams.pagesize"
          class="pagination"
          @pagination="getListTask"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getTaskLists, addOutboundNumberLists } from "@/api/outbound/automaticOutbound";
import { validateTel } from "@/utils/validate";
import { filterContent, pickerOptions } from "@/utils";
import { getUserAccountLists } from '@/api/systemSetup/roleSetting/userManage';
import Pagination from "@/components/Pagination"; // 对el-pagination 二次封装

export default {
  name: "Add",
  components: {
    Pagination,
  },
  filters: {
    judgmentState(status) {
      const statusMap = {
        0: "未启动",
        1: "启动",
        2: "暂停",
        3: "终止",
      };
      return statusMap[status];
    },
    judgmentType (status) {
      const statusMap = {
        '1': '语音外呼',
        '2': '坐席外呼',
      }
      return statusMap[status]
    },
  },
  props: {
    rowid: {
      type: String,
      default: "",
    },
    layerid: {
      type: String,
      default: "",
    },
    rowData: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      roleOptions: [], //任务人
      displayContent: true,
      props: {
        // 自定义省市下拉数据的key值
        value: "code",
        label: "name",
        children: "entityJson",
      },
      pageParams: {
        pageindex: 1, // 当前第几页
        pagesize: Number(this.$store.getters.serverConfig.PAGESIZE), // 每页几条数据
        total: 0, // 总共多少数据
      },
      outboundTaskRadio: 1, //外呼任务单选
      sourceOptions: [], //工单来源下拉数据
      taskDataLists: [], //外呼任务列表
      displayOutboundTask: true, //是否显示外呼任务
      handleTaskId: "", //选中行id
      autoDialsList: [], //外呼号码
      ruleForm: {
        F_ID: 0, //任务id
        F_TaskUser: "", //任务人
        F_Name: "", //任务名称
        F_Remarks: "", //任务说明
        F_Time: [], //时间
        F_StartTime: "", //开始时间
        F_EndTime: "", //结束时间
        F_State: "", //任务状态
        F_State: '', //任务状态
        F_Type: '', //外呼类型
        F_Content: '', //外呼内容
      },
      rules: {
        F_TaskUser: [
          {
            required: true,
            trigger: "change",
            message: "请选择任务人",
          },
        ],
        F_State: [
          {
            required: true,
            trigger: "change",
            message: "请选择任务状态",
          },
        ],
        F_Name: [
          {
            required: true,
            trigger: "blur",
            message: "请输入任务名称",
          },
        ],
        F_Type: [
          {
            required: true,
            trigger: "change",
            message: "请选择外呼类型",
          },
        ],
      },
      loading: false,
    };
  },
  created() {
    this.getRoleSelects();
    this.getListTask();
    Promise.all([]).then(() => {
      if (this.rowData) {
      }
    });
  },
  methods: {
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.ruleForm.F_StartTime = this.ruleForm.F_Time[0];
          this.ruleForm.F_EndTime = this.ruleForm.F_Time[1];
          for (let i = 0; i < this.rowData.length; i++) {
            this.autoDialsList = [];
            let data = {
              F_Parentid: "",
              F_CallUser: "",
              F_LastCallid: "",
              F_Tel: "",
              F_ISOutbound: 0,
            };
            data.F_Parentid = this.ruleForm.F_ID;
            data.F_CallUser = this.rowData[i].UserCode;
            data.F_LastCallid = this.rowData[i].Id;
            data.F_Tel = this.rowData[i].Caller;
            this.autoDialsList.push(data);
          }
          this.loading = true;
          const data = {
            F_ID: this.ruleForm.F_ID,
            F_TaskUser: this.ruleForm.F_TaskUser,
            F_Name: this.ruleForm.F_Name,
            F_Remarks: this.ruleForm.F_Remarks,
            F_StartTime: this.ruleForm.F_StartTime,
            F_EndTime: this.ruleForm.F_EndTime,
            F_State: this.ruleForm.F_State,
            F_Type: this.ruleForm.F_Type,
            F_Content: this.ruleForm.F_Content,
            AutoDials: this.autoDialsList,
          };
          addOutboundNumberLists(data)
            .then((response) => {
              this.loading = false;
              if (response.state.toLowerCase() === "success") {
                this.$parent.$layer.close(this.layerid);
                this.$parent.getList(); // 重新加载父级数据
                this.$message.success("恭喜你，添加成功!");
              }
            })
            .catch(() => {
              this.loading = false;
            });
          return;
        } else {
          this.$message.error("请输入有效的必填项信息!");
          return false;
        }
      });
    },
    getListTask() {
      this.loading = true;
      return new Promise((resolve) => {
        const params = {
          pageindex: this.pageParams.pageindex, // int 第几页
          pagesize: this.pageParams.pagesize, // int 每页几条信息
          keyword: "", //关键字
        };
        getTaskLists(params).then((response) => {
          this.loading = false;
          if (response.state.toLowerCase() === "success") {
            this.pageParams.total = response.rows.Totals;
            this.taskDataLists = response.rows.Rows;
          }
        });
        resolve();
      });
    },
    radioChangeTask() {
      if (this.outboundTaskRadio == "1") {
        this.displayOutboundTask = true;
      } else if (this.outboundTaskRadio == "2") {
        this.resetForm()
        this.displayOutboundTask = false;
      }
    },
    handleCurrentChangeTask(currentRow, oldCurrentRow) {
      this.ruleForm.F_ID = currentRow.F_ID; //外呼任务行id
      this.ruleForm.F_TaskUser = currentRow.F_TaskUser; //任务人
      this.ruleForm.F_Name = currentRow.F_Name; //任务名称
      this.ruleForm.F_Remarks = currentRow.F_Remarks; //任务说明
      this.ruleForm.F_Time.push(currentRow.F_StartTime); //时间
      this.ruleForm.F_Time.push(currentRow.F_EndTime); //时间
      this.ruleForm.F_State = currentRow.F_State + ""; //任务状态
      this.ruleForm.F_Type = currentRow.F_Type + ""; //外呼类型
      this.ruleForm.F_Content = currentRow.F_Content; //外呼内容
      if (currentRow.F_Type == 2) {
        this.displayContent = false
      } else if (currentRow.F_Type == 1) {
        this.displayContent = true
      }
    },
    handleChangeType(val) {
      if (val === "2") {
        this.displayContent = false
      } else if (val === "1") {
        this.displayContent = true
      }
    },
    // 获取任务人
    getRoleSelects () {
      getUserAccountLists().then(response => {
        if (response.state.toLowerCase() === 'success') {
          this.roleOptions = response.data.Rows
        }
      })
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    }
  },
};
</script>

<style rel="stylesheet/scss" lang="scss">
.order_form {
  .form_select {
    width: 100%;
  }
  .form_date {
    width: 100%;
  }
}
</style>