<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
      <el-form-item :label="$t('agent.agentNo')" prop="agentNo">
        <el-input v-model="queryParams.agentNo" :placeholder="$t('agent.agentNoPh')" clearable style="width: 200px"/>
      </el-form-item>
      <el-form-item :label="$t('agent.agentName')" prop="agentName">
        <el-input v-model="queryParams.agentName" :placeholder="$t('agent.agentNamePh')" clearable style="width: 200px"/>
      </el-form-item>
      <el-form-item :label="$t('agent.area')" prop="areaList">
        <el-select v-model="queryParams.areaList" clearable multiple :placeholder="$t('agent.areaPh')" style="width: 200px">
          <el-option v-for="item in areaList" :key="item" :label="item" :value="item"/>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('agent.type')" prop="typeList">
        <el-select v-model="queryParams.typeList" clearable multiple :placeholder="$t('agent.typePh')" style="width: 200px">
          <el-option v-for="item in typeList" :key="item" :label="item" :value="item"/>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('agent.agentLevel')" prop="agentLevelList">
        <el-select v-model="queryParams.agentLevelList" clearable multiple :placeholder="$t('agent.agentLevelPh')" style="width: 200px">
          <el-option v-for="item in agentLevelList" :key="item" :label="item" :value="item"/>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('agent.status')" prop="statusList">
        <el-select v-model="queryParams.statusList" clearable multiple :placeholder="$t('agent.statusPh')" style="width: 200px">
          <el-option v-for="item in statusList" :key="item" :label="item" :value="item"/>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('agent.createTime')">
        <el-date-picker
          v-model="dateRange"
          style="width: 200px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          :start-placeholder="$t('common.startTime')"
          :end-placeholder="$t('common.endTime')"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @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
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="showAgentDialog(true)"
          v-hasPermi="['user:agent:add']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['user:agent:export']"
        >导出
        </el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="agentList" stripe>
      <el-table-column label="No." type="index" width="55" align="center"/>
      <el-table-column :label="$t('agent.agentNo')" prop="agentNo" width="120"/>
      <el-table-column :label="$t('agent.agentName')" prop="agentName" :show-overflow-tooltip="true" width="150"/>
      <el-table-column :label="$t('agent.area')" prop="area" :show-overflow-tooltip="true" width="100"/>
      <el-table-column :label="$t('agent.type')" prop="type" width="100"/>
      <el-table-column :label="$t('agent.parentAgent')" prop="parentAgent" width="100"/>
      <el-table-column :label="$t('agent.parentSaler')" prop="parentSaler" width="100"/>
      <el-table-column :label="$t('agent.agentLevel')" prop="agentLevel" width="100"/>
      <el-table-column :label="$t('agent.discountRate')" prop="discountRate" width="100"/>
      <el-table-column :label="$t('agent.phone')" prop="phone" width="150"/>
      <el-table-column :label="$t('agent.thisYearExamine')" prop="thisYearExamine" width="100"/>
      <el-table-column :label="$t('agent.targetMoney')" prop="targetMoney" width="100"/>
      <el-table-column :label="$t('agent.targetCount')" prop="targetCount" width="100"/>
      <el-table-column :label="$t('agent.targetProject')" prop="targetProject" width="150"/>
      <el-table-column :label="$t('agent.status')" align="center" width="80">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-value="0"
            inactive-value="1"
            @change="handleStatusChange(scope.row,scope.index)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column :label="$t('agent.createTime')" align="center" prop="createTime" width="180">
      </el-table-column>
      <el-table-column :label="$t('common.operate')" align="center" prop="operate" fixed="right" width="200">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['user:agent:list']"
          >查看
          </el-button>
          <el-button
            size="mini"
            type="text"
            @click="showAgentDialog(false,scope.row)"
            v-hasPermi="['user:agent:edit']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            @click="handleDelete(scope.row)"
            v-hasPermi="['user:agent:del']"
          >删除
          </el-button>
          <el-button
            size="mini"
            type="text"
            @click="showExamineDialog(scope.row)"
            v-hasPermi="['user:agent:set']"
          >设置考核
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagicountry
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagicountry="getList"
    />

    <el-dialog :title="addFlag?$t('agent.addAgent'):$t('agent.editAgent')" :visible.sync="agentDialog" width="750px" append-to-body>
      <el-form ref="agentForm" :model="agentForm" :rules="agentRules" label-width="120px" inline>
        <el-form-item :label="$t('agent.agentName')" prop="agentName">
          <el-input v-model="agentForm.agentName" :placeholder="$t('agent.agentNamePh')" style="width: 200px"/>
        </el-form-item>
        <el-form-item :label="$t('agent.area')" prop="area">
          <el-select v-model="agentForm.area" clearable :placeholder="$t('agent.areaPh')" style="width: 200px">
            <el-option v-for="item in areaList" :key="item" :label="item" :value="item"/>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('agent.type')" prop="type">
          <el-select v-model="agentForm.type" clearable :placeholder="$t('agent.typePh')" style="width: 200px">
            <el-option v-for="item in typeList" :key="item" :label="item" :value="item"/>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('agent.parentSaler')" prop="parentSaler">
          <el-select v-model="agentForm.parentSaler" clearable :placeholder="$t('agent.parentSalerPh')" style="width: 200px">
            <el-option v-for="item in parentSalerList" :key="item" :label="item" :value="item"/>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('agent.parentAgent')" prop="parentAgent">
          <el-select v-model="agentForm.parentAgent" clearable :placeholder="$t('agent.parentAgentPh')" style="width: 200px">
            <el-option v-for="item in parentAgentList" :key="item" :label="item" :value="item"/>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('agent.agentLevel')" prop="agentLevel">
          <el-select v-model="agentForm.agentLevel" clearable :placeholder="$t('agent.agentLevelPh')" style="width: 200px">
            <el-option v-for="item in agentLevelList" :key="item" :label="item" :value="item"/>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('agent.country')" prop="country">
          <el-select v-model="agentForm.country" clearable :placeholder="$t('agent.countryPh')" style="width: 200px">
            <el-option v-for="item in countryList" :key="item" :label="item" :value="item"/>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('agent.head')" prop="head">
          <el-input v-model="agentForm.head" :placeholder="$t('agent.headPh')" style="width: 200px"/>
        </el-form-item>
        <el-form-item :label="$t('agent.phone')" prop="phone">
          <el-input v-model="agentForm.phone" :placeholder="$t('agent.phonePh')" style="width: 200px"/>
        </el-form-item>
        <el-form-item :label="$t('common.mail')" prop="mail">
          <el-input v-model="agentForm.mail" :placeholder="$t('agent.mailPh')" style="width: 200px"/>
        </el-form-item>
        <el-form-item :label="$t('common.address')" prop="address">
          <el-input v-model="agentForm.address" :placeholder="$t('agent.addressPh')" style="width: 200px"/>
        </el-form-item>
        <el-form-item :label="$t('agent.discountRate1')" prop="discountRate">
          <el-input v-model="agentForm.discountRate" :placeholder="$t('agent.discountRatePh')" style="width: 200px"/>
        </el-form-item>
        <el-form-item :label="$t('common.note')" prop="note">
          <el-input v-model="agentForm.note" :placeholder="$t('agent.notePh')" type="textarea"
                    :rows="3" style="width: 530px"/>
        </el-form-item>
        <el-form-item :label="$t('common.attachment')" prop="attachment">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
            ref="agentUpload"
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="submitAgent">{{ $t('common.ok') }}</el-button>
        <el-button @click="cancelAgent">{{ $t('common.cancel') }}</el-button>
      </div>
    </el-dialog>


    <el-dialog :title="$t('agent.editTarget')" :visible.sync="examineDialog" width="750px" append-to-body>
      <el-form ref="examineForm" :model="examineForm" :rules="examineRules" label-width="120px" inline>
        <el-form-item :label="$t('agent.agentName')" prop="agentName">
          <el-input v-model="examineForm.agentName" :placeholder="$t('agent.agentNamePh')" style="width: 200px" disabled/>
        </el-form-item>
        <el-form-item :label="$t('agent.area')" prop="area">
          <el-select v-model="examineForm.area" clearable :placeholder="$t('agent.agentNamePh')" style="width: 200px" disabled>
            <el-option v-for="item in areaList" :key="item" :label="item" :value="item"/>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('agent.type')" prop="type">
          <el-select v-model="examineForm.type" clearable :placeholder="$t('agent.agentNamePh')" style="width: 200px" disabled>
            <el-option v-for="item in typeList" :key="item" :label="item" :value="item"/>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('agent.parentSaler')" prop="parentSaler">
          <el-select v-model="examineForm.parentSaler" clearable :placeholder="$t('agent.agentNamePh')" style="width: 200px" disabled>
            <el-option v-for="item in parentSalerList" :key="item" :label="item" :value="item"/>
          </el-select>
        </el-form-item>

        <el-form-item :label="$t('agent.parentAgent')" prop="parentAgent">
          <el-select v-model="examineForm.parentAgent" clearable :placeholder="$t('agent.agentNamePh')" style="width: 200px" disabled>
            <el-option v-for="item in parentAgentList" :key="item" :label="item" :value="item"/>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('agent.agentLevel')" prop="agentLevel">
          <el-select v-model="examineForm.agentLevel" clearable :placeholder="$t('agent.agentNamePh')" style="width: 200px" disabled>
            <el-option v-for="item in agentLevelList" :key="item" :label="item" :value="item"/>
          </el-select>
        </el-form-item>


        <el-form-item :label="$t('agent.targetYear')" prop="targetYear">
          <el-input v-model="examineForm.targetYear" :placeholder="$t('agent.targetYearPh')" style="width: 200px"/>
        </el-form-item>

        <el-form-item :label="$t('agent.targetCount')" prop="targetCount">
          <el-input v-model="examineForm.targetCount" :placeholder="$t('agent.targetCountPh')" style="width: 200px"/>
        </el-form-item>

        <el-form-item :label="$t('agent.targetMoney')" prop="targetMoney">
          <el-input v-model="examineForm.targetMoney" :placeholder="$t('agent.targetMoneyPh')" style="width: 200px"/>
        </el-form-item>

        <el-form-item :label="$t('agent.targetProject')" prop="targetProject">
          <el-input v-model="examineForm.targetProject" :placeholder="$t('agent.targetProjectPh')" style="width: 200px"/>
        </el-form-item>

      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="submitExamine">{{ $t('common.ok') }}</el-button>
        <el-button @click="cancelExamine">{{ $t('common.cancel') }}</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

export default {
  name: "Agent",
  data() {
    return {
      fileList: [],
      agentDialog: false,
      examineDialog: false,
      addFlag: false,
      parentSalerList: [
        '销售1'
      ],
      parentAgentList: [
        '代理商1'
      ],
      countryList: [
        '中国', '俄罗斯'
      ],
      areaList: [
        '亚太区', '大中华区'
      ],
      typeList: [
        '一级代理', '二级代理'
      ],
      agentLevelList: [
        'A', 'B', 'C', 'D', 'E',
      ],
      statusList: [
        '正常', '停用'
      ],
      // 遮罩层
      loading: true,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 代理商数据
      agentList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        agentNo: null,
        agentName: null,
        areaList: [],
        typeList: [],
        agentLevelList: [],
        statusList: [],
      },
      // 表单参数
      agentForm: {
        agentName: null,
        area: null,
        type: null,
        parentSaler: null,
        parentAgent: null,
        agentLevel: null,
        country: null,
        head: null,
        phone: null,
        mail: null,
        address: null,
        discountRate: null,
        note: null,
      },
      // 表单校验
      agentRules: {
        agentName: [
          {required: true, message: this.$t('agent.agentNameRule'), trigger: "blur"}
        ],
        area: [
          {required: true, message: this.$t('agent.areaRule'), trigger: "blur"}
        ],
        type: [
          {required: true, message: this.$t('agent.typeRule'), trigger: "blur"}
        ],
        parentSaler: [
          {required: true, message: this.$t('agent.parentSalerRule'), trigger: "blur"}
        ],
        parentAgent: [
          {required: true, message: this.$t('agent.parentAgentRule'), trigger: "blur"}
        ],
        agentLevel: [
          {required: true, message: this.$t('agent.agentLevelRule'), trigger: "blur"}
        ],
        country: [
          {required: true, message: this.$t('agent.countryRule'), trigger: "blur"}
        ],
        head: [
          {required: true, message: this.$t('agent.headRule'), trigger: "blur"}
        ],
        phone: [
          {required: true, message: this.$t('agent.phoneRule'), trigger: "blur"}
        ],
        mail: [
          {required: true, message: this.$t('agent.mailRule'), trigger: "blur"}
        ],
        address: [
          {required: true, message: this.$t('agent.addressRule'), trigger: "blur"}
        ],
        discountRate: [
          {required: true, message: this.$t('agent.discountRateRule'), trigger: "blur"}
        ],
      },
      examineForm: {
        agentName: null,
        area: null,
        type: null,
        parentSaler: null,
        parentAgent: null,
        agentLevel: null,
        targetYear: null,
        targetCount: null,
        targetMoney: null,
        targetProject: null,
      },
      examineRules: {
        targetYear: [
          {required: true, message: "考核年度不能为空", trigger: "blur"}
        ],
        targetCount: [
          {required: true, message: "目标台数不能为空", trigger: "blur"}
        ],
        targetMoney: [
          {required: true, message: "目标销售额不能为空", trigger: "blur"}
        ],
        targetProject: [
          {required: true, message: "目标标杆项目数不能为空", trigger: "blur"}
        ]
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    showExamineDialog(row) {
      this.examineDialog = true;
      this.resetForm("examineForm");
      this.examineForm = {
        agentName: row.agentName,
        area: row.area,
        type: row.type,
        parentSaler: row.parentSaler,
        parentAgent: row.parentAgent,
        agentLevel: row.agentLevel,
        targetYear: row.targetYear,
        targetCount: row.targetCount,
        targetMoney: row.targetMoney,
        targetProject: row.targetProject,
      }
    },
    submitExamine() {
      console.log('设置考核参数', this.examineForm)
      this.$refs["examineForm"].validate((valid) => {

      })
    },
    cancelExamine() {
      this.examineDialog = false;
    },
    // 添加代理商对话框
    showAgentDialog(addFlag, row) {
      console.log(row)
      this.agentDialog = true;
      this.addFlag = addFlag;
      if (addFlag) {
        // 新增
        this.resetForm("agentForm");
        if (this.$refs.agentUpload) {
          this.$refs.agentUpload.clearFiles();
        }
      } else {
        // 编辑
        this.agentForm = {
          agentName: row.agentName,
          area: row.area,
          type: row.type,
          parentSaler: row.parentSaler,
          parentAgent: row.parentAgent,
          agentLevel: row.agentLevel,
          country: row.country,
          head: row.head,
          phone: row.phone,
          mail: row.mail,
          address: row.address,
          discountRate: row.discountRate,
          note: row.note,
        }

      }
    },
    // 提交代理商表单
    submitAgent() {
      this.$refs["agentForm"].validate((valid) => {

      })
    },
    // 取消代理商对话框
    cancelAgent() {
      this.agentDialog = false;
    },
    /** 查询角色列表 */
    getList() {
      this.loading = true;
      let param = {...this.queryParams}
      if (this.dateRange != null && this.dateRange.length > 1) {
        param.dateFrom = this.dateRange[0]
        param.dateTo = this.dateRange[1]
      }
      console.log('代理商列表参数', param)

      this.agentList = [
        {
          "agentNo": "0001",
          "agentName": "代理商1",
          "area": "亚太区",
          "type": "一级代理",
          "parentAgent": "-",
          "parentSaler": "销售1",
          "agentLevel": "A",
          "discountRate": "97%",
          "phone": "15151515115",
          "thisYearExamine": "已设置",
          "targetMoney": "999,999",
          "targetCount": "99",
          "targetProject": "999",
          "status": "0",
          "createTime": '2024-03-11',
          "country": '中国',
          "head": '张三',
          "mail": '123@golden-tech.com.cn',
          "address": 'AAA',
          "note": 'qqq',
          "targetYear": '2024',
        },
        {
          "agentNo": "0002",
          "agentName": "代理商2",
          "area": "亚太区",
          "type": "二级代理",
          "parentAgent": "代理商1",
          "parentSaler": "销售1",
          "agentLevel": "B",
          "discountRate": "97%",
          "phone": "15151515115",
          "thisYearExamine": "已设置",
          "targetMoney": "999,999",
          "targetCount": "99",
          "targetProject": "999",
          "status": "0",
          "createTime": '2024-03-11',
          "country": '俄罗斯',
          "head": '李四',
          "mail": '111@golden-tech.com.cn',
          "address": 'CCC',
          "note": 'qqqCCCC',
          "targetYear": '2024',
        },
        {
          "agentNo": "0003",
          "agentName": "代理商3",
          "area": "亚太区",
          "type": "二级代理",
          "parentAgent": "代理商1",
          "parentSaler": "销售1",
          "agentLevel": "B",
          "discountRate": "97%",
          "phone": "15151515115",
          "thisYearExamine": "已设置",
          "targetMoney": "999,999",
          "targetCount": "99",
          "targetProject": "999",
          "status": "0",
          "createTime": '2024-03-11',
          "country": '俄罗斯',
          "head": '王五',
          "mail": '222@golden-tech.com.cn',
          "address": 'BBB',
          "note": 'BBBVVV',
          "targetYear": '2024',
        },
      ]

      this.total = 3;
      this.loading = false;

      // listRole(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
      //     this.agentList = response.rows;
      //     this.total = response.total;
      //     this.loading = false;
      //   }
      // );

    },
    // 角色状态修改
    handleStatusChange(row, index) {
      // let text = row.status === "0" ? "启用" : "停用";
      // this.agentList[index].status = row.status === "0" ? "1" : "0";

      // this.$modal.confirm('确认要"' + text + '""' + row.roleName + '"角色吗？').then(function () {
      //   return changeRoleStatus(row.roleId, row.status);
      // }).then(() => {
      //   this.$modal.msgSuccess(text + "成功");
      // }).catch(function () {
      //   row.status = row.status === "0" ? "1" : "0";
      // });
    },
    // 表单重置
    reset() {
      this.form = {
        roleId: undefined,
        roleName: undefined,
        roleKey: undefined,
        roleSort: 0,
        status: "0",
        menuIds: [],
        deptIds: [],
        menuCheckStrictly: true,
        deptCheckStrictly: true,
        remark: undefined
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.getMenuTreeselect();
      this.open = true;
      this.title = "添加角色";
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const roleIds = row.agentNo
      this.$modal.confirm('是否确认删除代理商编号为: ' + roleIds + '？').then(function () {

      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/role/export', {
        ...this.queryParams
      }, `role_${new Date().getTime()}.xlsx`)
    },
  }
};
</script>

<style scoped>
.el-table th.gutter {
  display: table-cell !important;
}
</style>
