<template>
  <div id="form-1">
    <el-row>
      <el-col
        :span="24"
        class="main animate__animated animate__backInRight"
        v-loading="loadings"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-col class="top-btn">
          <el-button type="primary" size="mini" @click="toBack()">返回</el-button>
        </el-col>
        <el-col :span="24" class="goods">
          <el-col :span="24" class="goods_name">{{ goods.name }}</el-col>
          <el-col v-for="(item, index) in goods.file" :key="index" :span="2">
            <el-image :src="item.url" class="image" :preview-src-list="getUrl()"></el-image>
          </el-col>
        </el-col>
        <el-col :span="24" v-if="total == 0">
          <el-empty description="该商品暂无评价"></el-empty>
        </el-col>
        <el-col :span="24" class="one" v-else-if="!total == 0">
          <el-col :span="24" class="one_2">
            <el-col :span="24" class="cont" v-for="(item, index) in list" :key="index">
              <el-col :span="3" class="name">
                <el-image class="icon" :src="getCheck()"></el-image>
                <el-col>{{ getName() }}</el-col>
              </el-col>
              <el-col :span="21">
                <el-col :span="24">
                  <el-col :span="5">
                    <el-col :span="8">商品评分：</el-col>
                    <el-col :span="15"><el-rate v-model="item.goods_score" disabled score-template="{item.goods_score}" :colors="colors"> </el-rate></el-col>
                  </el-col>
                  <el-col :span="5">
                    <el-col :span="8">店铺评分：</el-col>
                    <el-col :span="15"><el-rate v-model="item.shop_score" disabled score-template="{item.shop_score}" :colors="colors"> </el-rate></el-col>
                  </el-col>
                  <el-col :span="5">
                    <el-col :span="8">快递评分：</el-col>
                    <el-col :span="15">
                      <el-rate v-model="item.transport_score" disabled score-template="{item.transport_score}" :colors="colors"> </el-rate>
                    </el-col>
                  </el-col>
                </el-col>
                <el-col>已购规格：{{ item.goodsSpec.name }}</el-col>
                <el-col v-for="(replys, index) in item.reply" :key="index">
                  <el-col :span="22" class="rate">买家评价： {{ replys.content }}</el-col>
                  <el-col v-for="(file, index) in replys.file" :key="index" :span="3">
                    <el-image :src="file.url" class="image" :preview-src-list="replys.url"></el-image>
                  </el-col>
                  <el-button class="btn" type="danger" plain size="mini" @click="toDel(replys, item, index)">删除</el-button>
                  <el-col :span="22" class="rates" style="word-break: break-all">商家回复：{{ replys.reply }}</el-col>
                  <el-col style="color: #999">{{ replys.time }}</el-col>
                  <el-col :span="12">
                    <el-col :span="20">
                      <el-input v-model="replys.reply" type="textarea" placeholder="请输入" size="small"></el-input>
                    </el-col>
                    <el-col :span="4">
                      <el-button class="btn" type="primary" size="mini" @click="toSend(replys, item)">发送</el-button>
                    </el-col>
                  </el-col>
                </el-col>
              </el-col>
            </el-col>
          </el-col>
          <el-col :span="24" class="pag">
            <el-pagination
              background
              @size-change="handleCurrentChange"
              @current-change="currentChange"
              :current-page.sync="skip"
              :page-sizes="[1, 10, 50, 100, 150, 200]"
              :page-size="limit"
              layout="sizes,total, prev, pager, next"
              :total="total"
            >
            </el-pagination>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const _ = require('lodash');
const moment = require('moment');
import { mapState, mapGetters, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('goodsRate');
const { mapActions: goods } = createNamespacedHelpers('goods');

export default {
  name: 'form-1',
  props: { id: { type: String } },
  components: {},
  data: function () {
    return {
      loadings: true,
      list: [],
      goods: {},
      skip: 1,
      total: 0,
      limit: 50,
      // 评分颜色
      colors: ['#99A9BF', '#F7BA2A', '#FF0000'],
    };
  },
  async created() {
    await this.search();
  },
  methods: {
    ...mapActions(['query', 'fetch', 'create', 'update', 'delete']),
    ...goods({ goodsFetch: 'fetch' }),
    // 查询
    async search({ skip = 0, limit = this.limit, ...info } = {}) {
      info.goods = this.id;
      let res;
      res = await this.goodsFetch(this.id);
      if (this.$checkRes(res)) this.$set(this, 'goods', res.data);
      res = await this.query({ skip, limit, ...info });
      if (this.$checkRes(res)) {
        for (const p1 of res.data) {
          for (const p2 of p1.reply) {
            let url = [];
            if (p2.file) {
              for (const p3 of p2.file) url.push(p3.url);
              p2.url = url;
            }
          }
        }
        this.$set(this, 'list', res.data);
        this.$set(this, 'total', res.total);
      }
      this.loadings = false;
    },
    getCheck() {
      for (const p1 of this.list) {
        return _.get(p1.customer, 'icon[0].url');
      }
    },
    getUrl() {
      let goods = this.goods;
      let list = [];
      for (const p1 of goods.file) {
        list.push(p1.url);
      }
      return list;
    },
    getName() {
      for (const p1 of this.list) {
        return _.get(p1.customer, 'name');
      }
    },
    // 分页
    currentChange(val) {
      this.search({ skip: (val - 1) * this.limit });
    },
    handleCurrentChange(val) {
      this.$set(this, 'limit', val);
      this.search();
    },
    async toSend(item, data) {
      let res;
      if (data.id) res = await this.update(data);
      if (this.$checkRes(res)) this.$message({ type: `success`, message: `回复成功` });
      this.search();
    },
    async toDel(item, data, index) {
      this.$confirm('是否确认删除该条评价?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        let res;
        let list = data.reply;
        if (index == '0') {
          res = await this.delete(data.id);
          if (this.$checkRes(res)) this.$message({ type: `success`, message: `刪除成功` });
        } else {
          list.splice(index, 1);
          if (data.id) res = await this.update(data);
          if (this.$checkRes(res)) this.$message({ type: `success`, message: `删除成功` });
        }
        this.search();
      });
    },
    // 返回
    toBack() {
      this.$emit('toBack');
    },
  },
  computed: {},
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.el-col {
  margin: 2px 0;
}
.goods {
  border: 1px solid rgb(255, 181, 181);
  margin: 10px 0;
  padding: 0 10px 10px 10px;
  text-align: center;
  .goods_name {
    margin: 5px;
    font-size: 20px;
    color: rgb(210, 69, 30);
  }
  .image {
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
  }
}

.one {
  margin: 20px 0 0 0;
  .one_1 {
    margin: 15px 0;
    padding: 10px;
  }
  .one_2 {
    border: 1px solid #ccc;
    padding: 10px;
    .cont {
      border-bottom: 1px solid rgb(238, 237, 237);
      margin: 10px 0;
      padding: 0 10px 10px 10px;

      .name {
        text-align: center;
        .icon {
          border-radius: 50%;
          width: 100px;
          height: 100px;
        }
      }
      .image {
        width: 100px;
        height: 100px;
        border: 1px solid #ccc;
      }
      .rate {
        width: 91%;
        color: red;
        word-break: break-all;
      }
      .rates {
        width: 91%;
        word-break: break-all;
      }
      .btn {
        margin: 8px 15px;
      }
    }
  }
  .pag {
    text-align: right;
    margin: 10px 0;
  }
}
</style>
