<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 class="app-gallery-item" style="position: relative;width: 100px;margin-top: 10px;">
                    <img v-if="!addMsg.pjPath || addMsg.pjPath==''"
                    src="../../assets/img/default.png" style="width:80px;height:80px" alt="">
                    <img v-else style="width:80px;height:80px" :src="addMsg.pjPath"
                    alt="">
                </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-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,
        },
        msg:{
            pageIndex:1,
            pageSize:15,
            CommentGrade:0,
            PlatformSource:0,
            UserName:'',
            GoodsName:'',
            Content:'',
        },
        tableData: [],
        templateList:[],
        platList:[],
        changeState:false,
        imgType:1,
      };
    },
    created() {
        this.getTemplate();
        this.getList();
        this.getplat();

    },
    methods: {
        SelectId(msg){
            if(this.imgType==1){
              let url  = this.getIconLink(msg.url)
              console.log(url)

              this.addMsg.UserPhoto=msg.selectId;
                this.addMsg.userPath=url;
            }
            if(this.imgType==2){
              let url  = this.getIconLink(msg.url)
              console.log(url)
                this.addMsg.CommentImgList=[url];
                this.addMsg.pjPath=url;
            }
            this.changeState = false;
        },
        openChangeDig(num) {
            this.changeState = true;
            this.imgType=num;
        },
        Save() {
            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;
            })
        },

    },
    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>
