<template>
  <div class="app-container">
    <div class="data-content">
      <div class="data-li type1">
        <img class="maint-img" src="../../../assets/images/maint-icon1.png" />
        <div class="maint-right">
          <div class="maint-right-li">
            <div>今日保修数量</div>
            <div class="data-text">{{ this.sumObj.dayNum }}</div>
          </div>
          <div class="maint-right-li">
            <div>与昨日相比</div>
            <div class="proportion">{{ this.sumObj.dayP }}%</div>
          </div>
        </div>
        <img
          class="type-img"
          src="../../../assets/images/texture1.png"
          alt=""
        />
      </div>
      <div class="data-li type2">
        <img class="maint-img" src="../../../assets/images/maint-icon2.png" />
        <div class="maint-right">
          <div class="maint-right-li">
            <div>近七天保修数量</div>
            <div class="data-text">{{ this.sumObj.weekNum }}</div>
          </div>
          <div class="maint-right-li">
            <div>与上周相比</div>
            <div class="proportion">{{ this.sumObj.weekP }}%</div>
          </div>
        </div>
        <img
          class="type-img"
          src="../../../assets/images/texture2.png"
          alt=""
        />
      </div>
      <div class="data-li type3">
        <img class="maint-img" src="../../../assets/images/maint-icon3.png" />
        <div class="maint-right">
          <div class="maint-right-li">
            <div>当月保修数量</div>
            <div class="data-text">{{ this.sumObj.monthNum }}</div>
          </div>
          <div class="maint-right-li">
            <div>与上月相比</div>
            <div class="proportion">{{ this.sumObj.monthP }}%</div>
          </div>
        </div>
        <img
          class="type-img"
          src="../../../assets/images/texture3.png"
          alt=""
        />
      </div>
      <div class="data-li type4">
        <img class="maint-img" src="../../../assets/images/maint-icon4.png" />
        <div class="maint-right">
          <div class="maint-right-li">
            <div>今年保修数量</div>
            <div class="data-text">{{ this.sumObj.yearNum }}</div>
          </div>
          <div class="maint-right-li">
            <div>与去年相比</div>
            <div class="proportion">{{ this.sumObj.yearP }}%</div>
          </div>
        </div>
        <img
          class="type-img"
          src="../../../assets/images/texture4.png"
          alt=""
        />
      </div>
    </div>
    <div class="btn-condition">
      <div class="condition-left" v-show="showSearch">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
        >
          <el-form-item label="设备类型" prop="deviceType">
            <el-select
              v-model="queryParams.deviceType"
              placeholder="请选择设备类型"
              clearable
            >
              <el-option
                v-for="item in devices"
                :key="item.buildingId"
                :label="item.deviceName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="维保类型" prop="maintainType">
            <el-select
              v-model="queryParams.maintainType"
              placeholder="请选择维保类型"
              clearable
            >
              <el-option
                v-for="dict in dict.type.maintain_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="维保人员" prop="maintainPeople">
            <el-input v-model="queryParams.maintainPeople" clearable></el-input>
          </el-form-item>
          <el-form-item label="维保日期" prop="timeArr">
            <el-date-picker
              v-model="timeArr"
              type="daterange"
              unlink-panels
              range-separator="~"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              @change="dateChange"
              style="width: 220px"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div class="primary-btn">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
        </div>
        <div class="cancel-btn">
          <el-button
            type="cancel"
            icon="el-icon-refresh"
            size="mini"
            @click="resetQuery"
            >重置</el-button
          >
        </div>
      </div>
    </div>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <div class="primary-btn" v-hasPermi="['device:maintain:add']">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            >新增</el-button
          >
        </div>
      </el-col>
      <el-col :span="1.5">
        <div class="success-btn" v-hasPermi="['device:maintain:edit']">
          <el-button
            type="success"
            icon="el-icon-edit"
            size="mini"
            :disabled="single"
            @click="handleUpdate"
            >修改</el-button
          >
        </div>
      </el-col>
      <el-col :span="1.5">
        <div class="delete-btn" v-hasPermi="['device:maintain:remove']">
          <el-button
            type="delete"
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="handleDelete"
            >删除</el-button
          >
        </div>
      </el-col>
      <!-- <el-col :span="1.5">
        <div class="warning-btn" v-hasPermi="['system:post:export']">
          <el-button
            type="warning"
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            >导出</el-button
          >
        </div>
      </el-col> -->
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <el-table
      v-loading="loading"
      :data="postList"
      @selection-change="handleSelectionChange"
      stripe
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="维保类型" align="center" prop="maintainType">
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.maintain_type"
            :value="scope.row.maintainType"
          />
        </template>
      </el-table-column>
      <el-table-column label="维保人员" align="center" prop="maintainPeople">
      </el-table-column>
      <el-table-column
        label="设备类型"
        align="center"
        prop="deviceType"
        :formatter="formatDeviceType"
      >
      </el-table-column>
      <el-table-column label="维修内容" align="center" prop="contents">
      </el-table-column>
      <el-table-column label="维修开始时间" align="center" prop="execTime">
      </el-table-column>
      <el-table-column label="花费时间" align="center" prop="spendTimes">
      </el-table-column>
      <el-table-column label="花费金额" align="center" prop="cost">
      </el-table-column>
      <el-table-column label="评价" align="center" prop="evaluate">
        <template slot-scope="{ row }">
          <span
            v-show="row.evaluate == '' || row.evaluate == null"
            class="iconfont"
            style="color: aquamarine; cursor: pointer"
            title="点击进行评价"
            @click="handleEvaluate(row)"
            >待评价</span
          >
          <span v-show="row.evaluate == '1'">极差</span>
          <span v-show="row.evaluate == '2'">失望</span>
          <span v-show="row.evaluate == '3'">一般</span>
          <span v-show="row.evaluate == '4'">满意</span>
          <span v-show="row.evaluate == '5'">非常满意</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['device:maintain:edit']"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['device:maintain:remove']"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

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

    <!-- 添加或修改维保对话框 -->
    <el-dialog :title="title" :visible.sync="open" append-to-body>
      <el-form ref="form" :model="form" :rules="rules">
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="维保类型" prop="maintainType">
              <el-select
                v-model="form.maintainType"
                placeholder="请选择维保类型"
                clearable
                :disabled="shouldDis"
              >
                <el-option
                  v-for="dict in dict.type.maintain_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备类型" prop="deviceType">
              <el-select
                v-model="form.deviceType"
                placeholder="请选择设备类型"
                clearable
                :disabled="shouldDis"
              >
                <el-option
                  v-for="item in devices"
                  :key="item.buildingId"
                  :label="item.deviceName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="维保人员" prop="maintainPeople">
              <el-input
                clearable
                placeholder="请输入维保人员"
                v-model="form.maintainPeople"
                :disabled="shouldDis"
              >
              </el-input></el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="花费金额" prop="cost">
              <el-input
                clearable
                v-model="form.cost"
                placeholder="请输入花费金额"
                :disabled="shouldDis"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="开始时间" prop="execTime">
              <el-date-picker
                v-model="form.execTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="选择日期"
                :disabled="shouldDis"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="花费时间" prop="spendTimes">
              <el-input
                v-model="form.spendTimes"
                placeholder="请输入花费时间"
                :disabled="shouldDis"
              /> </el-form-item
          ></el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="24">
            <el-form-item label="维保内容" prop="contents">
              <el-input
                v-model="form.contents"
                type="textarea"
                placeholder="请输入维保内容"
                :disabled="shouldDis"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center" v-if="isEvaluate || shouldDis">
          <el-col :span="24">
            <el-form-item label="评价得分" prop="evaluate">
              <el-rate
                v-model="form.evaluate"
                show-text
                :texts="['极差', '失望', '一般', '满意', '非常满意']"
                :disabled="isEvaluate"
                :text-color="textColor"
                style="line-height: 2.5"
              >
              </el-rate>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ledgerList } from "@/api/device/ledger";
import { getDay } from "@/utils/datetime";
import {
  maintainList,
  getMaintain,
  delMaintain,
  addMaintain,
  updateMaintain,
  getMaintainSum,
} from "@/api/device/maintenance";

export default {
  name: "maintenance",
  dicts: ["maintain_type", "sys_mt_type"],
  data() {
    return {
      shouldDis: false,
      isEvaluate: false,
      textColor: "#ffffff",
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 维保表格数据
      postList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        execTime: "",
        maintainType: "",
        maintainPeople: "",
        deviceType: "",
        beginTime: "",
        endTime: "",
      },
      timeArr: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        maintainType: [
          { required: true, message: "请选择维保类型", trigger: "blur" },
        ],
        deviceType: [
          { required: true, message: "请选择设备类型", trigger: "blur" },
        ],
      },
      devices: [], //设备类型
      sumObj: {
        dayNum: "0",
        dayP: "0",
        weekNum: "0",
        weekP: "0",
        monthNum: "0",
        monthP: "0",
        yearNum: "0",
        yearP: "0",
      },
    };
  },
  mounted() {
    this.getDeviceType();
    this.getMaintainSum();
    this.getList();
  },
  methods: {
    // 选中日期事件
    dateChange() {
      // console.log("打印时间", this.timeArr);
      if (!this.timeArr) {
        this.$nextTick(() => {
          this.timeArr = [];
          this.queryParams.beginTime = "";
          this.queryParams.endTime = "";
        });
      } else {
        this.queryParams.beginTime = this.timeArr[0];
        this.queryParams.endTime = this.timeArr[1];
      }
    },
    // 查询设备类型
    getDeviceType() {
      let data = {
        pageNum: 1,
        pageSize: 1000000,
      };
      ledgerList(data).then((response) => {
        this.devices = response.rows;
        // console.log("设备类型数据",this.devices)
      });
    },
    // 格式化设备类型的函数
    formatDeviceType(row, column, cellValue) {
      // 查找 devices 数组中 id 等于 cellValue 的对象
      const device = this.devices.find((item) => item.id === cellValue);
      // 如果找到，返回对应的 deviceName，否则返回原始值
      return device ? device.deviceName : cellValue;
    },
    /** 查询维保列表 */
    getList() {
      this.loading = true;
      maintainList(this.queryParams).then((response) => {
        this.postList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
      this.form.id = "";
    },
    // 表单重置
    reset() {
      this.form = {
        maintainType: "",
        maintainPeople: "",
        deviceType: "",
        cost: "",
        execTime: "",
        spendTimes: "",
        contents: "",
        evaluate: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.isEvaluate = false;
      this.shouldDis = false;
      this.reset();
      this.open = true;
      this.title = "添加维保信息";
      console.log("添加时不显示评分内容", this.isEvaluate);
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.isEvaluate = true;
      this.shouldDis = false;
      this.reset();
      this.form.id = "";
      const cpmId = row.id || this.ids;
      console.log("row", row);
      getMaintain(cpmId).then((response) => {
        console.log("打印结果", response.data);
        // this.form = response.data;
        this.form = {
          id: response.data.id,
          maintainType:
            response.data.maintainType !== null
              ? response.data.maintainType.toString()
              : null,
          maintainPeople: response.data.maintainPeople,
          deviceType:
            response.data.deviceType !== null
              ? response.data.deviceType.toString()
              : null,
          cost: response.data.cost,
          execTime: response.data.execTime,
          spendTimes: response.data.spendTimes,
          contents: response.data.contents,
          evaluate: Number(response.data.evaluate),
        };
        this.open = true;
        this.title = "修改维保信息";
      });
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != undefined) {
            updateMaintain(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            console.log("新增参数", this.form);
            addMaintain(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const Ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除维保编号为"' + Ids + '"的数据项？')
        .then(function () {
          return delMaintain(Ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "device/gateway/export",
        {
          ...this.queryParams,
        },
        `post_${new Date().getTime()}.xlsx`
      );
    },
    // 评价
    handleEvaluate(row) {
      this.isEvaluate = false;
      this.shouldDis = true;
      // if (this.userName !== "admin") {
      //   this.$message({
      //     message: "您不是管理员，不能够进行评价",
      //     type: "warning",
      //   });
      //   return;
      // }
      this.reset();
      this.form.id = "";
      const cpmId = row.id || this.ids;
      console.log("row", row);
      getMaintain(cpmId).then((response) => {
        console.log("打印结果", response.data);
        // this.form = response.data;
        this.form = {
          id: response.data.id,
          maintainType: response.data.maintainType.toString(),
          maintainPeople: response.data.maintainPeople,
          deviceType: response.data.deviceType.toString(),
          cost: response.data.cost,
          execTime: response.data.execTime,
          spendTimes: response.data.spendTimes,
          contents: response.data.contents,
          evaluate: Number(response.data.evaluate),
        };
        this.open = true;
        this.title = "修改维保信息";
      });
    },
    // 维保量汇总
    getMaintainSum() {
      let data = {
        buildingId: "",
        curDate: getDay(0),
      };
      getMaintainSum(data).then((res) => {
        if (res.code == 200) {
          this.sumObj = res.data;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.data-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  .data-li {
    background-color: transparent;
    border-radius: 0rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 0.15rem 0.2rem;
    width: 24%;
    margin-bottom: 0.24rem;
    font-family: SourceHanSansCN-Regular;
    font-size: 0.16rem;
    position: relative;
    overflow: hidden;
    .maint-img {
      width: 0.68rem;
      height: 0.68rem;
      margin-right: 0.15rem;
    }
    .maint-right {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      .maint-right-li {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        .data-text {
          z-index: 11 !important;
          font-family: DIN-Bold;
          font-size: 0.24rem;
          margin-top: 0.05rem;
        }
        .proportion {
          z-index: 11 !important;
          font-family: DIN-Bold;
          font-size: 0.2rem;
          margin-top: 0.1rem;
        }
      }
      .maint-right-li:nth-last-child(1) {
        margin-left: 0.35rem;
      }
    }
  }
  .type-img {
    position: absolute;
    bottom: 0;
    width: 3.17rem;
    height: 0.52rem;
    z-index: 10;
  }
  .type1 {
    border: 1px solid #e8aa13;
    border-radius: 10px;
    /* 设置渐变背景 */
    background: linear-gradient(rgba(26, 56, 65, 0.5), rgba(184, 196, 51, 0.5));
  }
  .type1::after {
    content: "";
    width: 100%;
    height: 90%;
    box-shadow: 0 0 30px 40px rgba(243, 166, 23, 0.3);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: -100% !important;
    z-index: 1;
  }
  .type2 {
    border: 1px solid #27a0f2;
    border-radius: 10px;
    /* 设置渐变背景 */
    background: linear-gradient(rgba(2, 43, 88, 0.5), rgba(8, 96, 179, 0.5));
  }
  .type2::after {
    content: "";
    width: 100%;
    height: 90%;
    box-shadow: 0 0 30px 40px rgba(28, 128, 241, 0.3);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: -100% !important;
    z-index: 1;
  }
  .type3 {
    border: 1px solid #1ad3ef;
    border-radius: 10px;
    /* 设置渐变背景 */
    background: linear-gradient(rgba(2, 50, 89, 0.5), rgba(17, 145, 151, 0.5));
  }
  .type3::after {
    content: "";
    width: 100%;
    height: 90%;
    box-shadow: 0 0 30px 40px rgba(117, 242, 248, 0.3);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: -100% !important;
    z-index: 1;
  }
  .type4 {
    border: 1px solid #11d47b;
    border-radius: 10px;
    /* 设置渐变背景 */
    background: linear-gradient(rgba(2, 57, 82, 0.5), rgba(5, 91, 90, 0.5));
  }
  .type4::after {
    content: "";
    width: 100%;
    height: 90%;
    box-shadow: 0 0 30px 40px rgba(115, 245, 176, 0.3);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: -100% !important;
    z-index: 1;
  }
}
</style>
<style scoped lang="scss">
/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */
@media (max-width: 2000px) {
  ::v-deep .el-dialog {
    width: 700px !important;
  }

  ::v-deep .el-dialog .el-form-item__label {
    width: 110px !important;
  }
  ::v-deep .el-dialog .el-form-item {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
}
@media (min-width: 2000px) {
  ::v-deep .el-dialog {
    width: 7.5rem !important;
  }

  ::v-deep .el-dialog .el-form-item__label {
    width: 1.1rem !important;
  }
  ::v-deep .el-dialog .el-form-item {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
}
</style>
