<template>
  <div class="app-container">
    <el-button type="primary" style="margin-bottom: 20px" @click="addAgent()"
      >添加</el-button
    >
    <el-table
      :data="agentList"
      v-loading="listLoading"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="代理商名称" prop="agentName" align="center" />
      <el-table-column label="标识" prop="agentCode" align="center" />
      <el-table-column
        label="代理类型"
        prop="agentType"
        align="center"
        :formatter="stateFormat"
      />

      <el-table-column
        label="商务负责人"
        prop="businessPerson"
        align="center"
      />

      <el-table-column fixed="right" label="操作" align="center" width="200">
        <template slot-scope="scope">
          <el-button type="primary" @click="clickEditor(scope.row)"
            >编辑</el-button
          >
          <el-button type="danger" @click="clickDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="is_clickEditor" top="2vh" width="80%">
      <el-form :label-width="formLabelWidth">
        <el-form-item label="代理商名称" :label-width="formLabelWidth">
          <el-input v-model="item.agentName"></el-input>
        </el-form-item>

        <el-form-item label="标识" :label-width="formLabelWidth">
          <el-input v-model="item.agentCode"></el-input>
        </el-form-item>

        <el-form-item label="代理类型" :label-width="formLabelWidth">
          <el-select v-model="item.agentType" placeholder="请选择代理类型">
            <el-option
              v-for="item of slotNameList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="商务负责人" :label-width="formLabelWidth">
          <el-tag
            :key="tag"
            v-for="tag in dynamicTags"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)"
          >
            {{ tag }}
          </el-tag>
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          >
          </el-input>
          <el-button
            v-else
            class="button-new-tag"
            size="small"
            @click="showInput"
            >+ 添加</el-button
          >
        </el-form-item>

        <el-form-item
          label="巨量引擎"
          style="
            border: 1px solid #ccc;
            box-sizing: border-box;
            padding: 10px 0;
          "
        >
          <div v-if="extMaps.toutiao && extMaps.toutiao.length > 0">
            代理类型：
            <el-select v-model="toutiaoAgentType" placeholder="请选择代理类型">
              <el-option
                v-for="item of slotNameList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <template v-for="(key, index) in extMaps.toutiao">
            <div :key="index" style="margin: 10px 0">
              自投：
              <el-input-number
                v-model="key.selfRebate"
                :step="10"
                :max="100"
                :min="0"
              ></el-input-number>
              代投：
              <el-input-number
                v-model="key.proxyRebate"
                :step="10"
                :max="100"
                :min="0"
              ></el-input-number>
              返点费率：
              <el-input-number
                v-model="key.serviceRebate"
                :step="1"
                :max="100"
                :min="0"
              ></el-input-number>
              服务费率：
              <el-input-number
                v-model="key.discountRebate"
                :step="1"
                :max="100"
                :min="0"
              ></el-input-number>
              垫款周期:
              <el-select v-model="key.frontTime" placeholder="请选择垫款周期">
                <el-option
                  v-for="item of frontTimeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>

              <el-button type="warning" @click="removeForm('toutiao', index)"
                >-</el-button
              >
            </div>
          </template>
          <el-button type="success" @click="addForm('toutiao')">+</el-button>
        </el-form-item>

        <el-form-item
          label="快手"
          style="
            border: 1px solid #ccc;
            box-sizing: border-box;
            padding: 10px 0;
          "
        >
          <div v-if="extMaps.kuaishou && extMaps.kuaishou.length > 0">
            代理类型：
            <el-select v-model="kuaishouAgentType" placeholder="请选择代理类型">
              <el-option
                v-for="item of slotNameList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <template v-for="(key, index) in extMaps.kuaishou">
            <div :key="index" style="margin: 10px 0">
              自投：
              <el-input-number
                v-model="key.selfRebate"
                :step="10"
                :max="100"
                :min="0"
              ></el-input-number>
              代投：
              <el-input-number
                v-model="key.proxyRebate"
                :step="10"
                :max="100"
                :min="0"
              ></el-input-number>
              返点费率：
              <el-input-number
                v-model="key.serviceRebate"
                :step="1"
                :max="100"
                :min="0"
              ></el-input-number>
              服务费率：
              <el-input-number
                v-model="key.discountRebate"
                :step="1"
                :max="100"
                :min="0"
              ></el-input-number>
              垫款周期:
              <el-select v-model="key.frontTime" placeholder="请选择垫款周期">
                <el-option
                  v-for="item of frontTimeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-button type="warning" @click="removeForm('kuaishou', index)"
                >-</el-button
              >
            </div>
          </template>
          <el-button type="success" @click="addForm('kuaishou')">+</el-button>
        </el-form-item>

        <el-form-item
          label="广点通"
          style="
            border: 1px solid #ccc;
            box-sizing: border-box;
            padding: 10px 0;
          "
        >
          <div v-if="extMaps.gdt && extMaps.gdt.length > 0">
            代理类型：
            <el-select v-model="gdtAgentType" placeholder="请选择代理类型">
              <el-option
                v-for="item of slotNameList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <template v-for="(key, index) in extMaps.gdt">
            <div :key="index" style="margin: 10px 0">
              自投：
              <el-input-number
                v-model="key.selfRebate"
                :step="10"
                :max="100"
                :min="0"
              ></el-input-number>
              代投：
              <el-input-number
                v-model="key.proxyRebate"
                :step="10"
                :max="100"
                :min="0"
              ></el-input-number>
              返点费率：
              <el-input-number
                v-model="key.serviceRebate"
                :step="1"
                :max="100"
                :min="0"
              ></el-input-number>
              服务费率：
              <el-input-number
                v-model="key.discountRebate"
                :step="1"
                :max="100"
                :min="0"
              ></el-input-number>
              垫款周期:
              <el-select v-model="key.frontTime" placeholder="请选择垫款周期">
                <el-option
                  v-for="item of frontTimeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-button type="warning" @click="removeForm('gdt', index)"
                >-</el-button
              >
            </div>
          </template>
          <el-button type="success" @click="addForm('gdt')">+</el-button>
        </el-form-item>

        <el-form-item
          label="百度"
          style="
            border: 1px solid #ccc;
            box-sizing: border-box;
            padding: 10px 0;
          "
        >
          <div v-if="extMaps.baidu && extMaps.baidu.length > 0">
            代理类型：
            <el-select v-model="baiduAgentType" placeholder="请选择代理类型">
              <el-option
                v-for="item of slotNameList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <template v-for="(key, index) in extMaps.baidu">
            <div :key="index" style="margin: 10px 0">
              自投：
              <el-input-number
                v-model="key.selfRebate"
                :step="10"
                :max="100"
                :min="0"
              ></el-input-number>
              代投：
              <el-input-number
                v-model="key.proxyRebate"
                :step="10"
                :max="100"
                :min="0"
              ></el-input-number>
              返点费率：
              <el-input-number
                v-model="key.serviceRebate"
                :step="1"
                :max="100"
                :min="0"
              ></el-input-number>
              服务费率：
              <el-input-number
                v-model="key.discountRebate"
                :step="1"
                :max="100"
                :min="0"
              ></el-input-number>

              垫款周期:
              <el-select v-model="key.frontTime" placeholder="请选择垫款周期">
                <el-option
                  v-for="item of frontTimeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-button type="warning" @click="removeForm('baidu', index)"
                >-</el-button
              >
            </div>
          </template>
          <el-button type="success" @click="addForm('baidu')">+</el-button>
        </el-form-item>

        <el-form-item label="垫款周期" :label-width="formLabelWidth">
          <el-select v-model="item.frontTime" placeholder="请选择垫款周期">
            <el-option
              v-for="item of frontTimeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="综合评价" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :autosize="{ minRows: 1, maxRows: 3 }"
            placeholder="请输入综合评价"
            v-model="item.overview"
          >
          </el-input>
        </el-form-item>

        <el-form-item label="运营优势" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :autosize="{ minRows: 1, maxRows: 3 }"
            placeholder="请输入运营优势"
            v-model="item.operationAdv"
          >
          </el-input>
        </el-form-item>

        <el-form-item label="额外信息" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :autosize="{ minRows: 1, maxRows: 3 }"
            placeholder="请输入额外信息"
            v-model="item.extInfo"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="is_clickEditor = false">取 消</el-button>
        <el-button type="primary" @click="clickEditorOk()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style>
.el-tag {
  margin-right: 10px;
}
.button-new-tag {
  margin-right: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-right: 10px;
  vertical-align: bottom;
}

/* .el-select {
  width: 130px;
} */
.el-input-number {
  width: 130px;
}
</style>

<script>
import { putonAgent } from "@/api/agent";

export default {
  name: "agent",
  data() {
    return {
      agentList: [], // 代理商列表
      listLoading: true, // 加载动画
      slotNameList: [
        { label: "一级代理", value: 1 },
        { label: "二级代理", value: 2 },
        { label: "三级代理", value: 3 },
      ], // 代理类型
      frontTimeList: [
        { label: "预付", value: 1 },
        { label: "次月中旬", value: 2 },
        { label: "次月底", value: 3 },
        { label: "次次月底", value: 4 },
      ], // 垫款周期

      is_clickEditor: false, // 控制编辑弹窗显示隐藏
      formLabelWidth: "120px", // 统一设置列的宽度
      item: {
        agentName: "", // 代理商名称
        agentCode: "", // 标识
        agentType: "", // 代理类型
        businessPerson: "", // 商务负责人
        rebate: "", // 返点数
        frontTime: "", // 垫款周期
        overview: "", // 综合评价
        operationAdv: "", // 运营优势
        extInfo: "", // 额外信息
        exts: [],
      },

      toutiaoAgentType: "", // 头条代理类型
      kuaishouAgentType: "", // 快手代理类型
      gdtAgentType: "", // 广点通代理类型
      baiduAgentType: "", // 百度代理类型

      extMaps: {
        gdt: [],
        kuaishou: [],
        toutiao: [],
        baidu: [],
        tuia: [],
      },

      dynamicTags: [], // 商务负责人列表
      inputVisible: false, // 控制商务负责人增加时的输入框
      inputValue: "", // 增加商务负责人时的输入值
    };
  },

  created() {
    this.putonAgent();
  },

  methods: {
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },

    //获取代理商列表
    putonAgent: function () {
      putonAgent("get", {}).then((res) => {
        this.listLoading = false;
        if (res.status === 200) {
          this.agentList = res.result.data;
        } else {
          alert(res.msg);
        }
      });
    },

    // 返回代理类型
    stateFormat: function (row, column) {
      switch (row.agentType) {
        case 1:
          return "一级代理";
          break;
        case 2:
          return "二级代理";
          break;
        case 3:
          return "三级代理";
          break;
      }
    },

    // 返回垫款周期
    formatter_frontTime: function (row, column) {
      switch (row.frontTime) {
        case 1:
          return "预付";
          break;
        case 2:
          return "次月中旬";
          break;
        case 3:
          return "次月底";
          break;
      }
    },

    // 添加
    addAgent: function () {
      this.is_clickEditor = true;
      this.item = {
        agentName: "", // 代理商名称
        agentCode: "", // 标识
        agentType: "", // 代理类型
        businessPerson: "", // 商务负责人
        rebate: "", // 返点数
        frontTime: "", // 垫款周期
        overview: "", // 综合评价
        operationAdv: "", // 运营优势
        extInfo: "", // 额外信息
      };

      (this.toutiaoAgentType = ""), // 头条代理类型
        (this.kuaishouAgentType = ""), // 快手代理类型
        (this.gdtAgentType = ""), // 广点通代理类型
        (this.baiduAgentType = ""), // 百度代理类型
        (this.extMaps = {
          toutiao: [],
          gdt: [],
          kuaishou: [],
          baidu: [],
        });
      this.dynamicTags = [];
    },

    //编辑
    clickEditor: function (e) {
      this.is_clickEditor = true;
      this.dynamicTags = e.businessPersonJson;
      this.item = { ...e };
      this.extMaps = {
        gdt: [],
        kuaishou: [],
        toutiao: [],
        baidu: [],
      };
      if (e.extMaps != null) {
        this.extMaps.gdt = e.extMaps.gdt ? e.extMaps.gdt : [];
        this.extMaps.kuaishou = e.extMaps.kuaishou ? e.extMaps.kuaishou : [];
        this.extMaps.baidu = e.extMaps.baidu ? e.extMaps.baidu : [];
        this.extMaps.toutiao = e.extMaps.toutiao ? e.extMaps.toutiao : [];
        this.toutiaoAgentType = e.extMaps.toutiao
          ? e.extMaps.toutiao[0].agentType
          : [];
        this.kuaishouAgentType = e.extMaps.kuaishou
          ? e.extMaps.kuaishou[0].agentType
          : [];
        this.baiduAgentType = e.extMaps.baidu
          ? e.extMaps.baidu[0].agentType
          : [];
        this.gdtAgentType = e.extMaps.gdt ? e.extMaps.gdt[0].agentType : [];
      }
    },

    //删除
    clickDelete: function (e) {
      console.log("删除===", e);
      this.$confirm("确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          putonAgent("delete", {
            id: e.id,
          }).then((res) => {
            this.listLoading = false;
            if (res.status === 200) {
              this.putonAgent();
              this.$message({
                message: "删除成功",
                type: "success",
              });
            } else {
              alert(res.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 编辑后点击确定
    clickEditorOk: function () {
      this.item.businessPerson = this.dynamicTags.join(",");

      Object.keys(this.extMaps).map((item) => {
        this.extMaps[item].map((item2) => {
          switch (item) {
            case "toutiao":
              item2.agentType = this.toutiaoAgentType;
              item2.platform = "toutiao";
              delete item2.id;
              break;
            case "gdt":
              item2.agentType = this.gdtAgentType;
              item2.platform = "gdt";
              delete item2.id;
              break;
            case "kuaishou":
              item2.agentType = this.kuaishouAgentType;
              item2.platform = "kuaishou";
              delete item2.id;
              break;
            case "baidu":
              item2.agentType = this.baiduAgentType;
              item2.platform = "baidu";
              delete item2.id;
              break;
          }
        });
      });

      this.item.exts = [
        ...this.extMaps.toutiao,
        ...this.extMaps.kuaishou,
        ...this.extMaps.gdt,
        ...this.extMaps.baidu,
      ];

      putonAgent("post", {
        ...this.item,
      }).then((res) => {
        this.listLoading = false;
        this.is_clickEditor = false;
        if (res.status == 200) {
          this.putonAgent();
          this.$message({
            message: "编辑成功",
            type: "success",
          });
        } else {
          alert(res.msg);
        }
      });
    },

    // 添加表单
    addForm(item) {
      let params = {
        agentType: "",
        selfRebate: 0,
        proxyRebate: 0,
        serviceRebate: 0,
        discountRebate: 0,
        frontTime: "",
      };
      switch (item) {
        case "toutiao":
          this.extMaps.toutiao.push(params);
          break;
        case "kuaishou":
          this.extMaps.kuaishou.push(params);
          break;
        case "gdt":
          this.extMaps.gdt.push(params);
          break;
        case "baidu":
          this.extMaps.baidu.push(params);
          break;
      }
    },

    // 移除表单
    removeForm(platform, i) {
      this.extMaps[platform].splice(i, 1);
    },
  },
};
</script>
