<template>
  <div>
    <van-sticky>
      <m-header :backUrl="backUrl" :isFixed="false" />
      <!-- <van-dropdown-menu>
                <van-dropdown-item v-model="value1" :options="option1" @change='onChange' />
            </van-dropdown-menu>
            <search @onSearch='onSearch' placeholder="请输入学生姓名" /> -->
      <search @onSearch="onSearch" placeholder="请输入学生姓名">
        <template #left>
          <van-dropdown-menu
            active-color="#01C1B5"
            style="padding-right: 0.1rem"
          >
            <van-dropdown-item
              v-model="value1"
              :options="option1"
              @change="onChange"
            />
          </van-dropdown-menu>
        </template>
      </search>
    </van-sticky>
    <van-list
      class="record-list"
      v-model="loading"
      v-if="dataShow"
      key="data"
      :finished="finished"
      :immediate-check="false"
      finished-text="- 没有更多内容 -"
      @load="getList"
    >
      <div
        class="record-item"
        v-for="(item, index) in dataList"
        :key="index"
        @click="onShow(item)"
      >
        <div class="top van-hairline--bottom">
          <p>学生姓名：{{ item.studentName }}</p>
          <p>送修时间：{{ item.createTime }}</p>
          <p>维修技师：{{ item.employeeName }}</p>
          <p>
            维修总费用：<span style="font-size: 0.16rem; color: #f85043"
              >¥{{ item.countAmount | moneyFormat }}</span
            >
          </p>
          <i v-if="item.repairStatus == 1" class="icon_over"></i>
          <span v-if="item.repairStatus == 0" class="repaireIng">进行中</span>
        </div>
        <!-- <van-field class="textarea" v-model="item.description" rows="2" :readonly="true" label="问题及解决方法" type="textarea" placeholder="请输入问题及解决方法" /> -->
        <div class="textarea">
          <div class="textarea-title">问题及解决方法：</div>
          <div
            class="textarea-value van-multi-ellipsis--l2"
            v-html="item.description"
          ></div>
        </div>
      </div>
    </van-list>
    <m-empty class="empty" msg="暂无维修记录" v-else key="data" />

    <van-popup
      round
      v-model="popupShow"
      position="bottom"
      :style="{ maxHeight: '40%' }"
    >
      <div class="popup-title">问题及解决方法：</div>
      <div class="popup-value" v-html="popupContent"></div>
    </van-popup>
  </div>
</template>
<script>
import MHeader from "@/components/header";
import MEmpty from "@/components/MEmpty";
import search from "@/components/Search";
import { repairQueryPage } from "./api";
export default {
  name: "teacherList",
  components: { MHeader, MEmpty, search },
  data() {
    let query = this.$route.query;
    return {
      value1: 2,
      option1: [
        { text: "全部", value: 2 },
        { text: "进行中", value: 0 },
        { text: "已完成", value: 1 },
      ],
      type: query.type,
      popupShow: false,
      loading: false,
      finished: false,
      params: {
        page: 1,
        rows: 20,
      },
      dataShow: true, // 是否有数据
      dataList: [],
      popupContent: null,
      backUrl: {
        status: true,
        path: "/home",
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      let params = this.params;
      await repairQueryPage(params).then((res) => {
        let result = res.data;
        this.loading = false;
        if (result.code == 200) {
          if (this.dataList.length > 0 && result.data.pageNo == 1) {
            return;
          }
          params.page = result.data.pageNo;
          result.data.rows.forEach((item) => {
            item.description = item.description.replace(/\n/g, "<br/>");
            let goodsList = item.goodsJson ? JSON.parse(item.goodsJson) : [];
            let tempAmount = item.amount;
            goodsList.forEach((item) => {
              tempAmount += parseFloat(
                item.discountPrice
                  ? item.discountPrice
                  : item.groupPurchasePrice
              );
            });
            tempAmount = tempAmount - item.exemptionAmount;
            item.countAmount = Number(tempAmount.toFixed(2));
          });
          this.dataList = this.dataList.concat(result.data.rows);
          if (params.page >= result.data.totalPage) {
            this.finished = true;
          }
          this.params.page++;
        } else {
          this.finished = true;
        }
        // 判断是否有数据
        if (this.dataList.length <= 0) {
          this.dataShow = false;
        }
      });
    },
    onChange(value) {
      if (value == 2) {
        this.params.repairStatus = null;
      } else {
        this.params.repairStatus = value;
      }
      this.params.page = 1;
      this.dataList = [];
      this.dataShow = true;
      this.loading = true;
      this.finished = false;
      this.getList();
    },
    // 搜索
    onSearch(val) {
      this.params.search = val;
      this.params.page = 1;
      this.dataList = [];
      this.dataShow = true;
      this.loading = true;
      this.finished = false;
      this.getList();
    },
    onShow(item) {
      // this.popupShow = true
      // this.popupContent = item.description
      this.$router.push({
        path: "/repaireOrderLook",
        query: {
          id: item.id,
          studentId: item.studentId,
          type: "list",
        },
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../assets/commonLess/variable.less");
/deep/.van-cell__title {
  font-size: 0.14rem;
  color: @mFontColor;
  flex: 1 auto;
  width: 50%;
}
/deep/.van-cell__value {
  font-size: 0.14rem;
}
.textarea {
  flex-direction: column;
  padding: 0.1rem 0.16rem;
  font-size: 0.14rem;
  color: #1a1a1a;
  /deep/.van-cell__value {
    padding-top: 0.1rem;
    flex: 1 auto;
    width: 100%;
  }
  .textarea-value {
    padding-top: 0.1rem;
    color: #999;
  }
}

/deep/.van-popup--bottom.van-popup--round {
  border-radius: 0.1rem 0.1rem 0 0;
}

.record-list {
  margin-top: 0.12rem;
  .record-item {
    position: relative;
    margin: 0 0.16rem 0.15rem;
    border-radius: 0.05rem;
    background: #fff;
    font-size: 0.14rem;
    color: #666;
  }
  .top,
  .bottom {
    padding: 0.12rem 0.12rem 0.12rem 0;
    margin-left: 0.12rem;
  }
  .top {
    line-height: 1.8;
    padding-top: 0.2rem;
  }
  .bottom {
    padding-bottom: 0.2rem;
  }
}

.icon_over {
  position: absolute;
  right: 0;
  top: 0;
  background: url("./images/icon_over.png") no-repeat center;
  background-size: contain;
  width: 0.9rem;
  height: 0.9rem;
}
.repaireIng {
  font-size: 0.16rem;
  color: #01c1b5;
  position: absolute;
  top: 0.12rem;
  right: 0.15rem;
}

.popup-title {
  padding: 0.2rem 0.16rem 0;
  font-size: 0.18rem;
  color: #000000;
}
.popup-value {
  padding: 0.08rem 0.16rem 0.15rem;
  font-size: 0.14rem;
  color: #666666;
}
/deep/.van-dropdown-menu__bar {
  background: transparent;
  box-shadow: inherit;
  height: 34px;
  margin-right: 0.08rem;
}
</style>
