<template>
  <div class="brandClassification">
    <template v-if="!isShowAdd">
      <div class="head-title">
        奖项管理
        <el-button style="float: right; margin-top: -5px" size="small" type="primary"
          @click="(isShowAdd = true), clearMsg()">
          新增</el-button>
      </div>
      <div class="content">
        <div>
          <div class="searchInput" style="width: 250px">
            <el-input @keyup.enter.native="(msg.pageIndex = 1), getList()" @clear="(msg.pageIndex = 1), getList()"
              style="display: inline-block; width: 225px; height: 30px" placeholder="请输入奖项名称" v-model="msg.Name"
              size="small" clearable>
            </el-input>
            <span @click="(msg.pageIndex = 1), getList()" class="el-icon-search" style="
                color: #979dad;
                font-size: 14px;
                position: relative;
                top: 1px;
              "></span>
          </div>
        </div>
        <el-table :data="tableData" v-loading="loading" border style="width: 100%; margin: 20px 0">
          <el-table-column prop="Id" label="编号" width="100">
          </el-table-column>
          <el-table-column prop="Name" label="奖项名称"> </el-table-column>
          <el-table-column prop="BigIco" width="150" label="大奖章">
            <template slot-scope="scope">
              <div class="app-image" :style="{
                  backgroundImage: 'url(' + scope.row.BigIco + ')',
                  backgroundSize: 'cover',
                }"></div>
            </template>
          </el-table-column>
          <el-table-column prop="SmallIco" width="150" label="小奖章">
            <template slot-scope="scope">
              <div class="app-image" :style="{
                  backgroundImage: 'url(' + scope.row.SmallIco + ')',
                  backgroundSize: 'cover',
                }"></div>
            </template>
          </el-table-column>
          <el-table-column prop="YearInfo" width="200" label="年份">
          </el-table-column>
          <el-table-column prop="BrandCount" width="200" label="关联品牌数量">
            <template slot-scope="scope">
              <div @click="jumpBrandList(scope.row)" style="cursor: pointer; color: red">
                {{ scope.row.TotalCount }}
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="address" width="200" label="操作">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                <img @click="editNews(scope.row)" style="width: 32px; height: 32px"
                  src="../../assets/img/userman/edit.png" alt="" />
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                <img @click="delNews(scope.row)" style="width: 32px; height: 32px; margin: 0 10px"
                  src="../../assets/img/userman/del.png" alt="" />
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="text-align: right" background @current-change="handleCurrentChange"
          :page-size="msg.pageSize" :current-page.sync="msg.pageIndex" layout="total,prev, pager, next" :total="total">
        </el-pagination>
      </div>
    </template>
    <template v-else>
      <div class="head-title">
        <span @click="isShowAdd = false" style="color: rgb(64, 158, 255); cursor: pointer">奖项列表</span><span
          style="margin: 0 9px; color: #c0c4cc">/</span><span>编辑奖项</span>
      </div>
      <div class="content">
        <el-form label-width="120px" :model="addMsg" :rules="rules" ref="addMsg">
          <el-form-item label="奖项名称" class="is-required" prop="Name">
            <el-input type="text" class="w400" v-model="addMsg.Name" size="small" placeholder="奖项名称" maxlength="100">
            </el-input>
          </el-form-item>

          <el-form-item label="大奖章" size="small" class="is-required" prop="BigIco">
            <!-- <el-button @click="openImageChoose(1)" size="small"
              >选择大奖章</el-button
            > -->
            <div class="app-gallery-item" style="
                position: relative;
                width: 100px;
                margin-top: 10px;
                border: none;
              ">
              <el-upload class="avatar-uploader" action :show-file-list="false" :http-request="UploadBig">
                <i v-if="!addMsg.BigIco || addMsg.BigIco == ''" class="el-icon-plus avatar-uploader-icon"></i>
                <img v-else :src="addMsg.BigIco" class="avatar" />
              </el-upload>
            </div>
          </el-form-item>
          <el-form-item label="小奖章" size="small" class="is-required" prop="SmallIco">
            <!-- <el-button @click="openImageChoose(2)" size="small"
              >选择小奖章</el-button
            > -->
            <div class="app-gallery-item" style="
                position: relative;
                width: 100px;
                margin-top: 10px;
                border: none;
              ">
          
              <el-upload class="avatar-uploader" action :show-file-list="false" :http-request="UploadSmall">
                <i v-if="!addMsg.SmallIco || addMsg.SmallIco == ''" class="el-icon-plus avatar-uploader-icon"></i>
                <img v-else :src="addMsg.SmallIco" class="avatar" />
              </el-upload>
            </div>
          </el-form-item>
          <el-form-item label="年份" size="small" class="is-required" prop="YearInfo">
            <el-input v-model="addMsg.YearInfo" placeholder="年份" type="number" style="width: 400px"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <el-button size="small" style="margin-top: 20px; padding: 9px 25px" type="primary" @click="submitform('addMsg')">
        保存
      </el-button>
    </template>
    <!-- 选择文件 -->
    <el-dialog title="选择文件" :visible.sync="isShowImage" width="1240px">
      <ChooseImg @SelectId="SelectId"></ChooseImg>
    </el-dialog>
  </div>
</template>
<script>
  import ChooseImg from "@/components/global/ChooseImg.vue";
  import UE from "@/components/global/UE.vue";
  export default {
    components: {
      ChooseImg,
      UE,
    },
    data() {
      return {
        loading: false,
        msg: {
          pageIndex: 1,
          pageSize: 10,
          Name: "",
        },
        total: 0,
        tableData: [], //数据列表
        isShowImage: false, //是否显示选择图片弹窗
        isShowAdd: false, //是否显示新增
        addMsg: {
          Id: 0, //主键编号
          BigIco: "", //大奖章
          SmallIco: "", //小奖章
          Name: "", //品牌分类标题
          // BrandList: [], //关联的品牌列表
          YearInfo: "",
        },
        rules: {
          Name: [{
            required: true,
            message: "请输入奖项名称",
            trigger: "blur",
          }, ],
          BigIco: [{
            required: true,
            message: "请选择大奖章",
            trigger: "blur",
          }, ],
          SmallIco: [{
            required: true,
            message: "请选择小奖章",
            trigger: "blur",
          }, ],
          YearInfo: [{
            required: true,
            message: "请选择年份",
            trigger: "blur",
          }, ],
        },
        brandMsg: {
          pageIndex: 1,
          pageSize: 9999,
          BrandName: "", //品牌名
          ProjectType: 0, //商铺性质
          Plumbing: -1, //上下水（0-否1-有）
          Caliber: -1, //管径（0-否1-有）
          Sewage: -1, //排污（0-否1-有）
          RanQi: -1, //燃气（0-否1-有）
          DianLiang: "", //电量（0-否1-有）
          PaiYan: -1, //排烟量（0-否1-有）
          KongTiao: -1, //空调（0-否1-有）
          XinFeng: -1, //新风（0-否1-有）
          BrandClassId: 0, //分类
          ExcelEnumIds: [],
          UserId: 0, //用户认证
        },
        openImage: 1, //判断当前（大/小）奖章
        yearOptions: [{
          name: 2010,
        }, ],
      };
    },
    created() {
      this.getList();
      // this.getBrandList();
      this.getYearList(5);
    },
    methods: {
      SelectId(msg) {
        let url = this.getIconLink(msg.url);
        if (this.openImage === 1) {
          this.addMsg.BigIco = url;
        } else if (this.openImage === 2) {
          this.addMsg.SmallIco = url;
        }
        this.isShowImage = false;
      },
      clearMsg() {
        this.addMsg.Id = 0;
        this.addMsg.BigIco = "";
        this.addMsg.SmallIco = "";
        this.addMsg.BrandList = [];
        this.addMsg.Name = "";
        this.addMsg.YearInfo = "";
      },
      getList() {
        this.loading = true;
        this.apipost("/api/Trade/GetPrizePageList", this.msg, (res) => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.total = res.data.data.count;
            let pageData = res.data.data.pageData;
            this.tableData = pageData;
          }
        });
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      //删除品牌分类
      delNews(item) {
        let that = this;
        that.Confirm("是否删除?", function () {
          that.apipost(
            "/api/Trade/RemovePrize", {
              Id: item.Id,
            },
            (res) => {
              if (res.data.resultCode == 1) {
                that.Success(res.data.message);
                that.getList();
              } else {
                that.Error(res.data.message);
              }
            }
          );
        });
      },
      //获取详情
      editNews(item) {
        this.isShowAdd = true;
        this.addMsg.Id = item.Id;
        this.apipost("/api/Trade/GetPrizeDetails", {
          Id: item.Id
        }, (res) => {
          if (res.data.resultCode == 1) {
            this.addMsg.BigIco = res.data.data.BigIco;
            this.addMsg.SmallIco = res.data.data.SmallIco;
            this.addMsg.Name = res.data.data.Name;
            this.addMsg.YearInfo = res.data.data.YearInfo;
            // this.addMsg.BrandList = [];
            // res.data.data.BrandList.map((e) => {
            //   this.addMsg.BrandList.push(e.ID);
            // });
          } else {
            this.Error(res.data.message);
          }
        });
      }, //新增修改
      submitform(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // let msg = JSON.parse(JSON.stringify(this.addMsg));
            // msg.BrandList = [];

            // this.addMsg.BrandList.forEach((e) => {
            //   msg.BrandList.push({ ID: e });
            // });

            this.apipost("/api/Trade/GetSetPrize", this.addMsg, (res) => {
              if (res.data.resultCode == 1) {
                this.isShowAdd = false;
                this.getList();
                this.clearMsg();
                this.Success(res.data.message);
              } else {
                this.Error(res.data.message);
              }
            });
          } else {
            return false;
          }
        });
      },
      //获取品牌列表
      getBrandList() {
        this.apipost("/api/Trade/GetBrandPageList", this.brandMsg, (res) => {
          if (res.data.resultCode == 1) {
            this.brandOptions = res.data.data.pageData;
          } else {
            this.Error(res.data.message);
          }
        });
      },
      openImageChoose(type) {
        this.isShowImage = true;
        this.openImage = type;
      },
      jumpBrandList(item) {
        if (item.TotalCount > 0) {
          this.$router.push({
            path: "/brandManagement",
            query: {
              PrizeId: item.Id,
              readonly: 1
            },
          });
        }
      },
      getYearList(n) {
        let date = new Date();
        let year = date.getFullYear();
        this.yearOptions = [];
        for (let i = year - n; i < year + n; i++) {
          this.yearOptions.push({
            name: i,
          });
        }
      },
      //选择图片
      UploadBig(file) {
        this.UploadFileToTencent(this.FileType().UserImg, file.file, (res) => {
          if (res.resultCode == 1) {
            this.addMsg.BigIco = res.FileUrl;
          }
        });
      },
      UploadSmall(file) {
        const isLt1M = file.file.size / 1024 / 1024 < 1;
        if (!isLt1M) {
          this.$message.error("上传头像图片大小不能超过 1MB!");
          return;
        }
        this.UploadFileToTencent(this.FileType().UserImg, file.file, (res) => {
          if (res.resultCode == 1) {
            this.addMsg.SmallIco = res.FileUrl;
          }
        });
      },
    },
    mounted() {},
  };

</script>
<style>
  .brandClassification .remark_name {
    color: #888888;
    font-size: 12px;
    margin-left: 10px;
    float: right;
  }

  .brandClassification .app-image {
    background-position: center center;
    width: 50px;
    height: 50px;
    border-radius: 0%;
    float: left;
    margin-right: 8px;
  }

  .brandClassification .blue {
    color: #409eff;
  }

  .brandClassification .content .searchInput {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
  }

  .brandClassification .content .searchInput .el-input__inner {
    border: none;
    outline: none;
    height: 30px;
    line-height: 30px;
  }

  .brandClassification .content .searchInput {
    line-height: normal;
    display: inline-table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    width: 250px;
    margin-right: 20px;
  }

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

  .brandClassification .el-form-item__content {
    line-height: 0;
  }

  .brandClassification .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .brandClassification .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
  }

  .avatar {
    width: 80px;
    height: 80px;
    display: block;
  }

</style>
