<template>
  <div class="setMember usersList usersListEdit">
    <div class="head-title">
      <span @click="CommonJump('evaluationMan')" class="blue point">评价管理</span> / 司导评价编辑
    </div>
    <div class="content">
      <el-form style="width:50%" label-width="150px">
        <el-form-item label="用户来源">
          <el-select filterable v-model="addMsg[0].PlatformSource" size="small" placeholder="请选择">
            <el-option v-for="item in platList" :key="item.Id" :label="item.Name" :value="item.Id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="addMsg[0].UserName" size="small"></el-input>
        </el-form-item>
        <el-form-item>
          <label slot="label">
            <span style="color:red">*</span>评价时间
          </label>
          <el-date-picker size="small" v-model="addMsg[0].CreateDate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="订单id">
          <el-input v-model="addMsg[0].OrderDetailId" size="small"></el-input>
        </el-form-item>
        <el-form-item label="用户头像">
            <el-tooltip class="item" effect="dark" content="建议尺寸100*100" placement="top">
                <el-button @click="openChangeDig(3)" size="small">选择文件</el-button>
            </el-tooltip>
            <div class="app-gallery-item" style="position: relative;width: 100px;margin-top: 10px;">
                <img v-if="!userPath || userPath==''"
                src="../../assets/img/default.png" style="width:80px;height:80px" alt="">
                <img v-else style="width:80px;height:80px" :src="userPath"
                alt="">
            </div>
        </el-form-item>

        <el-form-item>
          <label slot="label">
            <span style="color:red">*</span>商品
          </label>
          <el-select filterable v-model="addMsg[0].GoodsId" size="small" placeholder="请选择">
            <el-option v-for="item in tableData" :key="item.Id" :label="item.Name" :value="item.Id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <label slot="label">
            <span style="color:red">*</span>车辆
          </label>
          <el-select style="margin-right: 10px;" v-model="addMsg[0].CarId" size="small" placeholder="请选择">
            <el-option v-for="item in CarList" :key="item.ID" :label="item.Name" :value="item.ID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车辆评分" size="small">
          <el-rate v-model="addMsg[0].CommentScore" style="margin-top:5px;" show-text></el-rate>
        </el-form-item>
        <el-form-item label="车辆评价内容">
          <el-input v-model="addMsg[0].Content" type="textarea" row="3" size="small"></el-input>
        </el-form-item>
        <el-form-item label="车辆图片">
          <div class="nav_Main">
            <div class="nav_IconContent">
              <div v-for="(item, index) in addMsg[0].CommentImgList" :key="index+'2'"
                style="margin-right: 20px; position: relative; ">
                <div class="colapp-image" :style="{
                                  backgroundImage: 'url(' + item + ')'
                                }"></div>
                <el-button @click="ClearCarouse(index,1)" class="delBtn" type="danger" icon="el-icon-close" circle>
                </el-button>
              </div>
            </div>
            <div @click="openChangeDig(1)" v-if="addMsg[0].CommentImgList.length<9" class="add-image-btn 2222">
              + 添加图片
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <label slot="label">
            <span style="color:red">*</span>关联导游
          </label>
          <el-select class="w150" style="margin-right: 10px;" v-model="addMsg[1].GuideId" size="small"
            placeholder="请选择">
            <el-option v-for="item in GuideList" :key="item.ID" :label="item.Name" :value="item.ID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="导游评分" size="small">
          <el-rate v-model="addMsg[1].CommentScore" style="margin-top:5px;" show-text></el-rate>
        </el-form-item>
        <el-form-item label="导游评价内容">
          <el-input v-model="addMsg[1].Content" type="textarea" row="3" size="small"></el-input>
        </el-form-item>
        <el-form-item label="导游图片" style="display:none;">
          <div class="nav_Main">
            <div class="nav_IconContent">
              <div v-for="(item, index) in addMsg[1].CommentImgList" :key="index+'2'"
                style="margin-right: 20px; position: relative; ">
                <div class="colapp-image" :style="{
                                  backgroundImage: 'url(' + item + ')'
                                }"></div>
                <el-button @click="ClearCarouse(index,2)" class="delBtn" type="danger" icon="el-icon-close" circle>
                </el-button>
              </div>
            </div>
            <div @click="openChangeDig(2)" v-if="addMsg[1].CommentImgList.length<9" class="add-image-btn 2222">
              + 添加图片
            </div>
          </div>
        </el-form-item>
      </el-form>

    </div>
    <div style="margin-top:20px">
      <el-button size="small" type="primary" @click="Save">保存</el-button>
    </div>
    <!-- 选择文件 -->
    <el-dialog title="选择文件" :visible.sync="changeState" width="1240px">
      <ChooseImg @SelectId="SelectId"></ChooseImg>
    </el-dialog>
  </div>
</template>
<script>
  import ChooseImg from "@/components/global/ChooseImg.vue";
  export default {
    components: {
      ChooseImg
    },
    data() {
      return {
        rules: {
          CreateDate: [{
            type: 'string',
            required: true,
            message: '请选择时间',
            trigger: 'change'
          }],
          GoodsId: [{
            required: true,
            message: '请选择商品',
            trigger: 'change'
          }],
          CommentGrade: [{
            required: true,
            message: '请选择评分',
            trigger: 'change'
          }],
          Is_Show: [{
            required: true,
            message: '请选择',
            trigger: 'change'
          }],
          Is_Anonymity: [{
            required: true,
            message: '请选择',
            trigger: 'change'
          }],
        },
        addMsg: [{
          PlatformSource: 1, //用户来源
          CreateDate: '', //评论日期
          OrderDetailId: '', //订单详情id
          UserName: '', //昵称
          GoodsId: '', //商品id
          Content: '', //评论内容
          CommentImgList: [], //评论图片
          CommentScore: 5, //分数
          GuideId: 0, // 导游id（新增一条评论需新增2调数据，一个是对导游（车辆id=0）的一个是对车辆的（导游id=0），）	
          CarId: '',
          UserPhoto:0, //用户头像
        }, {
          PlatformSource: 1, //用户来源
          CreateDate: '', //评论日期
          OrderDetailId: '', //订单详情id
          UserName: '', //昵称
          GoodsId: '', //商品id
          Content: '', //评论内容
          CommentImgList: [], //评论图片
          CommentScore: 5, //分数
          GuideId: '', // 导游id（新增一条评论需新增2调数据，一个是对导游（车辆id=0）的一个是对车辆的（导游id=0），）	
          CarId: 0,
          UserPhoto:0, //用户头像
        }],
        msg: {
          pageIndex: 1,
          pageSize: 15,
          CommentGrade: 0,
          PlatformSource: 0,
          UserName: '',
          GoodsName: '',
          Content: '',
        },
        tableData: [],
        templateList: [],
        platList: [],
        changeState: false,
        imgType: 1,

        GuideList: [], //导游列表
        CarList: [], //导游列表
        userPath:'', //用户头像
      };
    },
    created() {
      this.getTemplate();
      this.getList();
      this.getplat();

      this.getGuideCarList() //获取车辆下拉
      this.getGuideCarGuideList();
    },
    methods: {
      SelectId(msg) {
        if (this.imgType == 1) {
          let url = this.getIconLink(msg.url)
          this.addMsg[0].CommentImgList.push(url);
        }
        if (this.imgType == 2) {
          let url = this.getIconLink(msg.url)
          this.addMsg[1].CommentImgList.push(url);
        }
        if (this.imgType == 3) {
          let url = this.getIconLink(msg.url);
          this.userPath = url;
          this.addMsg[0].UserPhoto=msg.selectId;
          this.addMsg[1].UserPhoto=msg.selectId;
        }
        this.changeState = false;
      },
      //删除图片
      ClearCarouse(index, type) {
        if (type == 1) {
          this.addMsg[0].CommentImgList.splice(index, 1);
        }
        if (type == 2) {
          this.addMsg[1].CommentImgList.splice(index, 1);
        }
      },
      openChangeDig(num) {
        this.changeState = true;
        this.imgType = num;
      },
      Save() {
        this.addMsg[1].CreateDate = this.addMsg[0].CreateDate;
        this.addMsg[1].OrderDetailId = this.addMsg[0].OrderDetailId;
        this.addMsg[1].UserName = this.addMsg[0].UserName;
        this.addMsg[1].GoodsId = this.addMsg[0].GoodsId;
        this.addMsg[1].PlatformSource = this.addMsg[0].PlatformSource;
        if(this.addMsg[0].CreateDate==''){
            this.Error('请选择评价时间');
            return
        }
        if(this.addMsg[0].GoodsId==''){
            this.Error('请选择商品');
            return
        }
        if(this.addMsg[0].CarId==''){
            this.Error('请选择评车辆');
            return
        }
        if(this.addMsg[1].GuideId==''){
            this.Error('请选择导游');
            return
        }
        this.apipost("/api/GuideCar/SetGuideCarCommentInfo", this.addMsg, res => {
          if (res.data.resultCode == 1) {
            this.CommonJump('evaluationMan')
          } else {
            this.Error(res.data.message);
          }
        })
      },
      getList() {
        let msg = {
          pageIndex: 1,
          pageSize: 999,
          Name: '',
          GoodsClassify: 1
        }
        this.apipost("/api/product/GetListByGoodsClassify", msg, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            let pageData = res.data.data.pageData;
            this.tableData = pageData;
          }

        })
      },
      //获取用户来源平台
      getplat() {
        this.apipost("/api/user/GetMemberUserSourceEnumList", {}, res => {
          this.platList = res.data.data;
        })
      },
      getTemplate() {
        this.apipost("/api/order/GetGoodsCommentTypeEnumList", {}, res => {
          this.templateList = res.data.data;
        })
      },
      getGuideCarList() {
        this.apipost("/api/GuideCar/GetGuideCarList", {}, res => {
          if (res.data.resultCode == 1) {
            this.CarList = res.data.data;
          }
        });
      },
      getGuideCarGuideList() {
        this.apipost("/api/GuideCar/GetGuideCarGuideList", {
          SiteId: 0
        }, res => {
          if (res.data.resultCode == 1) {
            this.GuideList = res.data.data
          }
        });
      },
    },
    mounted() {

    }
  };

</script>
<style>
  .usersListEdit .tip {
    margin-left: 10px;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    color: #ff4544;
    background-color: #FEF0F0;
    padding: 0 20px;
    border-radius: 5px;
  }

  .usersListEdit .app-image {
    background-size: cover;
    background-position: center center;
    width: 80px;
    height: 80px;
    border-radius: 0%;
  }

  .setMember .setTable .el-table__body .cell {
    display: flex;
    align-items: center;

  }

  .setMember .commonLabel .el-form-item__label {
    margin-top: -4px;
  }

  .setMember .discount .el-form-item__label {
    padding-right: 30px;
    margin-top: -4px;
  }

  .setMember .el-form-item .elzk {
    position: absolute;
    left: -25px;
    top: 8px;
  }

  .setMember .el-form-item {
    position: relative;
  }

  .usersList .blue {
    color: #409EFF;

  }

  .usersList .content {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
  }

  .usersList .nav_Main {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .usersList .nav_IconContent {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .usersList .nav_IconContent div>div {
    display: inline-block;
  }

  .usersList .add-image-btn {
    width: 100px;
    height: 100px;
    line-height: 100px;
    color: #419efb;
    border: 1px solid #e2e2e2;
    cursor: pointer;
    text-align: center;
  }

  .usersList .colapp-image {
    background-size: cover;
    background-position: center center;
    width: 100px;
    height: 100px;
    border-radius: 0%;
  }

  .usersList .delBtn {
    position: absolute;
    right: -8px;
    top: -8px;
    padding: 4px 4px !important;
  }

</style>
