<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%" :model="addMsg" :rules="rules" ref="addMsg" label-width="150px">
        <el-form-item label="用户来源">
          <el-select filterable v-model="addMsg.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.UserName" size="small"></el-input>
        </el-form-item>
        <el-form-item label="评价时间" prop="CreateDate">
          <el-date-picker size="small" v-model="addMsg.CreateDate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="用户头像">
          <el-tooltip class="item" effect="dark" content="建议尺寸100*100" placement="top">
            <el-button @click="openChangeDig(1)" size="small">选择文件</el-button>
          </el-tooltip>
          <div class="app-gallery-item" style="position: relative;width: 100px;margin-top: 10px;">
            <img v-if="!addMsg.userPath || addMsg.userPath==''" src="../../assets/img/default.png"
              style="width:80px;height:80px" alt="">
            <img v-else style="width:80px;height:80px" :src="addMsg.userPath" alt="">
          </div>
        </el-form-item>
        <el-form-item label="商品" prop="GoodsId">
          <el-select filterable v-model="addMsg.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="评价图片">
          <el-tooltip class="item" effect="dark" content="建议尺寸750*750" placement="top">
            <el-button @click="openChangeDig(2)" size="small">选择文件</el-button>
          </el-tooltip>
          <div  style="position: relative;margin-top: 10px;">
            <template v-if="addMsg.CommentImgList&&addMsg.CommentImgList.length>0" >
              <template v-for="(item,index) in addMsg.CommentImgList">
                <img :key="index" :src="item" style="width:80px;height:80px;padding-left:10px;" alt="">
              </template>
            </template>
            <template v-else>
              <img src="../../assets/img/default.png" style="width:80px;height:80px" alt="">
            </template>
          </div>
        </el-form-item>
        <el-form-item label="评价">
          <el-input v-model="addMsg.Content" type="textarea" row="2" size="small"></el-input>
        </el-form-item>
        <el-form-item label="评分" prop="CommentGrade">
          <el-radio v-model="addMsg.CommentGrade" :label="item.Id" v-for="(item,index) in templateList" :key="index">
            {{item.Name}}</el-radio>
        </el-form-item>
        <el-form-item label="评价标签" prop="Is_Anonymity">
        <el-select
          style="margin-right: 10px"
          v-model="multipleSelection"
          multiple
          placeholder="请选择"
        >
          <el-option
            v-for="item in LabelIdList"
            :key="item.Id"
            :label="item.Name"
            :value="item.Id"
          >
          </el-option>
        </el-select>
      </el-form-item>
        <el-form-item label="是否匿名" prop="Is_Anonymity">
          <el-switch v-model="addMsg.Is_Anonymity" active-color="#409EFF" :active-value="1" :inactive-value="2">
          </el-switch>
        </el-form-item>
        <el-form-item label="是否显示" prop="Is_Show">
          <el-switch v-model="addMsg.Is_Show" active-color="#409EFF" :active-value="1" :inactive-value="2">
          </el-switch>
        </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: '',
          UserName: '',
          GoodsId: '',
          UserPhoto: '',
          CommentGrade: '',
          Content: '',
          CommentImgList: [],
          Is_Show: 2,
          Is_Anonymity: 2,
          LabelIds:'',
        },
        msg: {
          pageIndex: 1,
          pageSize: 15,
          CommentGrade: 0,
          PlatformSource: 0,
          UserName: '',
          GoodsName: '',
          Content: '',
        },
        tableData: [],
        templateList: [],
        platList: [],
        LabelIdList:[],
        changeState: false,
        imgType: 1,
        multipleSelection: [], //多选
      };
    },
    created() {
      this.getTemplate();
      this.getList();
      this.getplat();
      this.GetCommentLabel();
    },
    methods: {
      SelectId(msg) {
        if (this.imgType == 1) {
          let url = this.getIconLink(msg.url)
          this.addMsg.UserPhoto = msg.selectId;
          this.addMsg.userPath = url;
        }
        if (this.imgType == 2) {
          let url = this.getIconLink(msg.url)
          this.addMsg.CommentImgList.push(url);
          this.addMsg.pjPath = url;
        }
        this.changeState = false;
      },
      openChangeDig(num) {
        this.changeState = true;
        this.imgType = num;
      },
      Save() {
        if(this.multipleSelection){
          this.addMsg.LabelIds=this.multipleSelection.join(',')
        }
        this.apipost("/api/order/SetGoodsCommentInfo", 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: '',
        }
        this.apipost("/api/product/GetProductGoodsDialogList_V2", 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;
        })
      },
      GetCommentLabel() {
        this.apipost("/api/order/GetCommentLabelList", {}, res => {
          this.LabelIdList = 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;
  }

</style>
