<template>
  <div class="app-container">
    <div class="filter-container" style="margin: 10px 0 10px 0">
      <!-- 搜索字段 -->
      <div class="flex">
        <div class="w_input">
          <span class="textSpan"> 运营商：</span>
          <el-select
            size="small"
            v-model="body.operator"
            clearable
            placeholder="请选择运营商"
            style="width: 65%"
            @change="changeoperator"
          >
            <el-option
              v-for="item in mobileOperator"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
        <div class="w_input" style="margin-left:30px">
          <span class="textSpan">面额：</span>
          <el-input
            v-model="body.facePrice"
            style="width: 65%;"
            placeholder="请输入面额"
            size="small"
            clearable
            @change="changePrice"
          />
        </div>
        <div class="w_input" >
          <span class="textSpan">维护状态：</span>
          <el-select
            size="small"
            v-model="body.status"
            clearable
            placeholder="请选择维护状态"
            style="width: 65%"
            @change="changeScope"
          >
            <el-option
              v-for="item in status"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
        
      </div>
      <div class="flex">
        <div class="w_input">
          <span class="textSpan">　地区：</span>
          <el-select
            size="small"
            v-model="body.province"
            clearable
            placeholder="请选择产品地区"
            style="width: 65%"
            @change="changeProvince"
          >
            <el-option
              v-for="item in provinceList"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </div>
        <div class="w_input" >
          <span class="textSpan">维护范围：</span>
          <el-select
            size="small"
            v-model="body.rechargeType"
            clearable
            placeholder="请选择维护范围"
            style="width: 65%"
          >
            <el-option
              v-for="item in rechargeStatus"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
        <div class="w_date">
          <span class="textSpan">时间：</span>
          <el-date-picker
            v-model="body.callbackTime"
            size="small"
            type="datetimerange"
            range-separator="至"
            style="width:85%"
            @change="oncheckTimeStart"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            clearable
          >
          </el-date-picker>
        </div>
         
      </div>
      <div class="flex">
          <div class="w_input"> 
          <span class="textSpan">客户名称:</span>
          <!-- <el-input v-model="body.customerName" style="width:200px;" placeholder="客户名称" size="small" clearable /> -->
          <el-select size="small" v-model="body.customerId" filterable  clearable style="width: 65%"  placeholder="请选择">
            <el-option
              v-for="item in userDataList"
              :key="item.customerId"
              :label="item.customerName"
              :value="item.customerId">   
            </el-option>
          </el-select>
        </div>
      </div>
      <!-- 按钮----查找  重置  新增  -->
      <div class="flexend">
        <el-button
          class="filter-item"
          icon="el-icon-search"
          type="primary"
          plain
          @click="handleSearch"
          >查找</el-button
        >
        <!-- <el-button
          class="classitem"
          type="primary"
          plain
          icon="el-icon-refresh-left"
          @click="handleRefresh"
          >重置
        </el-button> -->
        <el-button
          class="classitem"
          style="marginRight:50px"
          type="primary"
          plain
          icon="el-icon-plus"
          @click="handleAdd"
          >新增
        </el-button>
      </div>
      <!-- 表格 -->
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column label="序号" width="50" align="center">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="面额"
          width="60"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.facePrice }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="运营商"
          align="center"
          show-overflow-tooltip
          width="80"
        >
          <template slot-scope="scope">
            <!-- <el-tag>{{ scope.row.operator }}</el-tag> -->
            <el-tag type="warning" v-if="scope.row.operator == 3" size="small">电信</el-tag>
            <el-tag type="primary" v-if="scope.row.operator == 1" size="small">移动</el-tag>
            <el-tag type="success" v-if="scope.row.operator == 2" size="small">联通</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          label="客户名称"
          width="160"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.customerName }}</span>
          </template>
        </el-table-column>
   
        <el-table-column
          label="地区"
          width="120"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.province }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="开始时间"
          width="160"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.startTime }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="结束时间"
          width="160"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.endTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="维护范围 " align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag type="warning" v-if="scope.row.rechargeType === 1" size="small"
              >快充</el-tag
            >
            <el-tag type="success" v-if="scope.row.rechargeType === 2" size="small"
              >慢充</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="维护状态" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag type="info" v-if="scope.row.status === 0" size="small">未维护</el-tag>
            <el-tag v-if="scope.row.status === 1" size="small">已维护</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="维护类型" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.orderType === 0" size="small">自动</el-tag>
            <el-tag v-if="scope.row.orderType === 1" size="small">手动</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="修改者" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.modifyUser }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="修改时间"
          align="center"
          width="160"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.updateTime }}</span>
          </template>
        </el-table-column>

        <el-table-column label="创建者" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.createUser }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="创建时间"
          align="center"
          width="160"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" fixed="right" width="190" align="center">
          <template slot-scope="scope">
            <el-button
              size="small"
              icon="el-icon-edit"
              type="warning"
              plain
              @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              v-if="scope.row.orderType === 1"
              size="small"
              icon="el-icon-delete"
              type="danger"
              plain
              @click="handleDelete(scope.row, $event)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          current-page.sync="body.page"
          @size-change="handleSizeChange"
          :current-page="body.page"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="body.size"
          layout="total, sizes, prev, pager, next, jumper"
          background
          :total="total"
        >
        </el-pagination>
      </div>
      <!-- 添加或修改对话框 -->

      <el-dialog
        :title="operation ? '新增' : '编辑'"
        :visible.sync="dialogFormVisible"
        center
        width="40%"
      >
        <el-form
          ref="dataForm"
          :model="dataForm"
          :rules="rules2"
          label-width="80px"
          size="small"
          label-position="right"
        >
          <el-form-item
            label="开始时间"
            :label-width="formLabelWidth"
            prop="startTime"
          >
            <el-date-picker
              v-model="dataForm.startTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              style="width: 90%;"
              placeholder="选择开始时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            label="结束时间"
            :label-width="formLabelWidth"
            prop="endTime"
          >
            <el-date-picker
              v-model="dataForm.endTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              style="width: 90%;"
              placeholder="选择结束时间"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item
            label="产品所属地区"
            :label-width="formLabelWidth"
            prop="province"
          >
            <el-select
              size="small"
              v-model="dataForm.province"
              clearable
              placeholder="请选择所属地区"
              style="width: 90%"
              :disabled="operation == false"
            >
              <el-option
                v-for="item in provinceList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>

          <el-form-item
            label="运营商"
            :label-width="formLabelWidth"
            prop="operator"
          >
            <el-select
              size="small"
              v-model="dataForm.operator"
              placeholder="请选择运营商"
              style="width: 90%"
              :disabled="operation == false"
            >
              <el-option
                v-for="item in mobileOperator"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item
            label="面额"
            :label-width="formLabelWidth"
            prop="facePrice"
          >
            <el-input
              v-model.trim="dataForm.facePrice"
              style="width: 90%;"
              placeholder="请输入面额"
              :disabled="operation == false"
            />
          </el-form-item>

          <el-form-item
            label="维护范围"
            :label-width="formLabelWidth"
            prop="rechargeType"
          >
            <el-select
              size="small"
              v-model="dataForm.rechargeType"
              placeholder="请选择维护范围"
              style="width:90%"
              :disabled="operation == false"
            >
              <el-option
                v-for="item in rechargeStatus"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="维护状态"
            :label-width="formLabelWidth"
            prop="status"
          >
            <el-select
              size="small"
              v-model="dataForm.status"
              placeholder="请选择维护状态"
              style="width:90%"
            >
              <el-option
                v-for="item in status"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
           <el-form-item
            label="客户名称"
            :label-width="formLabelWidth"
            v-if=" operation"
            prop="customerInfos"
          >
            <el-select
              size="small"
              v-model="dataForm.customerInfos"
              filterable 
              value-key="customerId"
              multiple 
              placeholder="请选择客户名称"
              style="width:90%"
            >
              <el-option
                v-for="item in userDataList"
                :key="item.customerId"
                :label="item.customerName"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import api from '@/api/userList'
import { MaintSearch, province, MaintAdd, MaintDel } from "@/api/product";
export default {
  data() {
    return {
      //搜索表单里的数据
      body: {
        facePrice: "", //面额
        operator: "", //运营商
        callbackTime: "", //时间范围
        startTime: "", //开始维护时间
        endTime: "", //结束维护时间
        province: "", //地区
        status: "", //维护状态
        rechargeType:"",//维护范围
        customerId:"",
        current: 1, //当前页码
        size: 10, //每页记录条数
        orderType: "" //维护类型
      },
      // callbackTime: "", //时间范围
      //表格里的数据
      provinceList: [], //地区
      status: [{ id: 0, name: "未维护" }, { id: 1, name: "已维护" }],
      rechargeStatus: [{ id: 1, name: "快充" }, { id: 2, name: "慢充" }], //充值方式
      //运营商
      mobileOperator: [
        { id: 1, name: "移动" },
        { id: 3, name: "电信" },
        { id: 2, name: "联通" }
      ],
      tableData: [], //后台请求回的数据
      operation: false, // true:新增, false:编辑
      dialogFormVisible: false, // 控制弹出框
      formLabelWidth: "120px", //新增宽度
      rules2: {
        orderType: [
          { required: true, message: "请选择维护类型", trigger: "blur" }
        ],
        operator: [
          { required: true, message: "请选择运营商", trigger: "blur" }
        ],
        province: [
          { required: true, message: "请选择所属地区", trigger: "blur" }
        ],
        facePrice: [{ required: true, message: "请输入面额", trigger: "blur" }],
        status: [
          { required: true, message: "请输入维护状态", trigger: "blur" }
        ],
        startTime: [
          { required: true, message: "请输入开始时间", trigger: "blur" }
        ],
        endTime: [
          { required: true, message: "请输入结束时间", trigger: "blur" }
        ],
        rechargeType: [
          { required: true, message: "请选择维护范围", trigger: "blur" }
        ], //充值方式
        customerInfos: [
          { required: true, message: "请选择客户", trigger: "blur" }
        ] //充值方式
      },
      relues: {},
      //新增   编辑里的数据
      dataForm: {
        facePrice: "",
        province: "",
        operator: "",
        rechargeType: "",
        startTime: "", //开始维护时间
        endTime: "", //结束维护时间
        status: ""
      },
      total: 0,
      loading: false,
      userDataList:[]
    };
  },
  created() {
    this.getTenantList();
    this.onprovince(); //省份
    this.user()
  },
  methods: {
     //客户名称
    user(){
      api.account.userList().then((res) => {
        this.loading =false
        let userDataList = res.data.data
        this.userDataList = userDataList
      })
    },
    //表格数据
    getTenantList() {
      this.loading = true;
      const params = new URLSearchParams();
      params.append("facePrice", this.body.facePrice);
      params.append("operator", this.body.operator);
      params.append("orderType", this.body.orderType);
      params.append("rechargeType", this.body.rechargeType);
      params.append("province", this.body.province);
      params.append("status", this.body.status);
      params.append("startTime", this.body.startTime);
      params.append("endTime", this.body.endTime);
      params.append("customerId", this.body.customerId);
      params.append("current", this.body.current);
      params.append("size", this.body.size);
      // console.log(params,"params")
      MaintSearch(params).then(res => {
        this.loading = false;
        console.log(res, "222");
        this.tableData = res.data.data.records;
        console.log(this.tableData.facePrice, "face");
        this.total = res.data.data.total;
      });
    },
    //省份数据
    onprovince() {
      province().then(res => {
        // console.log(res)
        let province = res.data.data;
        let arry = province.map(res => {
          return { name: res };
        });
        this.provinceList = arry;
        console.log(this.provinceList, "this.provinceList");
      });
    },
    //搜索
    handleSearch() {
      this.body.current = 1;
      if (this.body.callbackTime == null) {
        //发送时间为空时清空 body 里的发送时间
        this.body.startTime = "";
        this.body.endTime = "";
      }
      this.getTenantList();
    },
    //重置
    handleRefresh() {},
    //新增
    handleAdd() {
      this.dialogFormVisible = true;
      this.operation = true;
      this.dataForm = {
        facePrice: "",
        province: "",
        operator: "",
        rechargeType: "",
        startTime: "",
        endTime: "",
        status: ""
      };
      if (this.$refs["dataForm"]) {
        this.$refs["dataForm"].resetFields();
      }
    },
    //编辑
    handleEdit: function(row) {
      this.dataForm = {};
      // this.rules2 = {}
      this.dialogFormVisible = true;
      this.operation = false;
      let newObj = JSON.parse(JSON.stringify(row));
      this.dataForm = newObj;
      if (this.$refs["dataForm"]) {
        this.$refs["dataForm"].resetFields();
      }
    },
    //新增或修改API
    submitForm() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          if (!this.operation) {
            // 编辑
            MaintAdd(this.dataForm).then(response => {
              if (response.data.status == 200) {
                this.$message({
                  type: "success",
                  message: "操作成功"
                });
                this.dialogFormVisible = false;
                this.getTenantList();
              } else {
                this.$message({
                  type: "error",
                  message: response.data.message
                });
              }
            });
          } else {
            console.log(this.dataForm);
            //   // 添加
            MaintAdd(this.dataForm).then(response => {
              console.log(response);
              if (response.data.status == "200") {
                this.$message({
                  type: "success",
                  message: "操作成功"
                });
                this.dialogFormVisible = false;
                this.getTenantList();
              } else {
              }
            });
          }
        }
      });
    },

    // 删除
    handleDelete: function(row, e) {
      const that = this;
      let target = e.target;
      console.log(target.nodeName, "target");
      if (target.nodeName == "SPAN" || target.nodeName == "I") {
        target = e.target.parentNode;
        console.log(target, "111");
      }
      target.blur();
      this.$confirm(
        "此操作将删除：面额为" +
          row.facePrice +
          "元，地区为：" +
          row.province +
          "的产品信息",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          let info = {
            facePrice: row.facePrice,
            province: row.province,
            operator: row.operator,
            rechargeType: row.rechargeType,
            customerId:row.customerId
          };
          console.log(info, "info");
          MaintDel(info).then(res => {
            console.log(res, "del");
            if (res.status === 200) {
              this.$message({
                type: "success",
                message: "操作成功"
              });
              that.getTenantList();
            } else {
              this.$message({
                type: "error",
                message: response.data.msg
              });
            }
          });
        })
        .catch(() => {
          // this.$message({
          //   type: "info",
          //   message: "已取消删除"
          // });
        });
    },
    //时间范围
    oncheckTimeStart() {
      if (this.body.callbackTime !== null) {
        this.body.startTime = this.body.callbackTime[0];
        console.log(this.body.callbackTime);
        this.body.endTime = this.body.callbackTime[1];
      }
    },
    //订单状态
    changeScope() {
      console.log(this.body.status);
    },
    //面额
    changePrice() {
      console.log(this.body.facePrice, "price");
    },
    //搜索供应商
    changeoperator() {
      console.log(this.body.operator);
    },
    //地区
    changeProvince() {
      console.log(this.body.province);
    },

    //分页
    handleSizeChange: function(val) {
      this.body.size = val;
      this.getTenantList();
    },
    // 换页
    handleCurrentChange: function(val) {
      this.body.current = val;
      this.getTenantList();
    }
  }
};
</script>

<style scoped>
.flex {
  width: 95%;
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
  /* flex-wrap: wrap; */
  justify-content: flex-start;
}
.w_input {
  width: 30%;
}
 .w_date{
     width:40%;
 }
.textSpan {
  position: relative;
  top: 0;
  font-size: 14px;
  font-weight: 600;
  color: rgb(87, 86, 86);
}
.flexend {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding-bottom: 20px;
}
</style>
