<template>
  <div v-loading="loading" class="addfxs">
    <div class="head-title">
      <span @click="CommonJump('schoolAndCompanyList')" class="blue point"
        >校企合作列表</span
      >
      / 校企合作详情
    </div>
    <div class="content">
      <el-form
        :model="addMsg"
        :rules="rules"
        ref="addMsg"
        label-width="150px"
        style="width: 600px"
      >
        <el-form-item label="学校名称" prop="ShoolName" size="small">
          <el-input v-model="addMsg.ShoolName"></el-input>
        </el-form-item>
        <el-form-item label="关联分销商" prop="AgentIds" size="small">
          <div class="check-box">
            <div
              v-for="(item, index) in fxsList"
              :key="item.UserId"
              class="check-box-item"
            >
              <el-button
                >{{ item.NickName }}
                <i class="el-icon-delete del-icon" @click="delFXS(index)"></i>
              </el-button>
            </div>
            <el-button
              type="primary"
              icon="el-icon-plus"
              @click="showFXS"
              class="check-box-item"
            >
            </el-button>
          </div>
        </el-form-item>
        <el-form-item class="tooltiplabel" label="LOGO" prop="CoverPhoto">
          <el-upload
            class="logo-uploader"
            :show-file-list="false"
            action=""
            :http-request="UploadImage"
          >
            <el-image
              v-if="addMsg.CoverPhoto"
              :src="addMsg.CoverPhoto"
              class="logo"
              fit="cover"
            />
            <i v-else class="el-icon-plus logo-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
    </div>
    <div style="margin-top: 20px">
      <el-button size="small" type="primary" @click="submitForm('addMsg')"
        >保存</el-button
      >
    </div>
    <el-dialog title="分销商列表" :visible.sync="showDialog" width="500px">
      <div style="padding: 0 20px; background: #fff" class="digbox">
        <el-input
          v-model="DistributorMsg.NickName"
          style="margin-bottom: 10px"
          placeholder="输入会员昵称"
          size="small"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="GetDistributorInfoList"
          ></el-button>
        </el-input>
        <el-table
          :data="DLoptions"
          header-cell-class-name="headClass"
          border
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="Id" label="ID" width="100"> </el-table-column>
          <el-table-column label="名称">
            <template slot-scope="scope">
              <div style="display: flex; align-items: center">
                <div
                  class="app-image"
                  :style="{
                    backgroundImage: 'url(' + scope.row.Photo + ')',
                    backgroundSize: 'cover',
                  }"
                ></div>
                <div>{{ scope.row.NickName }}</div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        style="text-align: right"
        background
        @current-change="dighandleCurrentChange"
        :page-size="DistributorMsg.pageSize"
        layout="prev, pager, next"
        :current-page.sync="DistributorMsg.pageIndex"
        :total="fxsCount"
      >
      </el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false" size="small" type="primary"
          >关闭</el-button
        >
        <el-button @click="confirm" size="small" type="primary">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      addMsg: {
        Id: 0,
        ShoolName: "",
        CoverPhoto: "",
        AgentIds: [],
      },

      rules: {
        ShoolName: [
          { required: true, message: "请输入学校名称", trigger: "blur" },
        ],
      },
      DistributorMsg: {
        AuditStatus: 2,
        GradeId: -1,
        Mobile: "",
        Name: "",
        NickName: "",
        Source: 0,
        UserId: 0,
        pageIndex: 1,
        pageSize: 10,
      },
      DLoptions: [],
      loading: false,
      showDialog: false,
      sels: [],
      fxsList: [],
      fxsCount: 0,
    };
  },
  created() {
    if (this.$route.query.Id) {
      this.addMsg.Id = this.$route.query.Id;
      this.getData(this.$route.query.Id);
      this.GetDistributorInfoList();
    } else {
      this.addMsg = {
        Id: 0,
        ShoolName: "",
        CoverPhoto: "",
        AgentIds: [],
      };
    }
  },
  methods: {
    getData(ID) {
      this.loading = true;
      this.apipost(
        "/api/Education/GetEducationSchoolDetails ",
        {
          Id: ID,
        },
        (res) => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.addMsg.ShoolName = res.data.data[0].ShoolName;
            this.addMsg.CoverPhoto = res.data.data[0].CoverPhoto;
            this.fxsList = res.data.data[0].AgentList || [];
            if (this.fxsList.length > 0) {
              this.fxsList.forEach((e) => {
                (e.NickName = e.UserName), (e.UserId = e.Id);
              });
            }

            let arr = res.data.data[0].AgentIds.split(",");
            this.addMsg.AgentIds = arr.map((e) => {
              e = parseInt(e);
              return e;
            });
          }
        }
      );
    },
    //选择图片
    UploadImage(file) {
      this.UploadFileToTencent(this.FileType().UserImg, file.file, (res) => {
        if (res.resultCode == 1) {
          this.addMsg.CoverPhoto = res.FileUrl;
        }
      });
    },
    // 获取分销商
    GetDistributorInfoList() {
      this.apipost(
        "/api/user/GetDistributorInfoPageList",
        this.DistributorMsg,
        (res) => {
          if (res.data.resultCode == 1) {
            this.fxsCount = res.data.data.count;
            this.DLoptions = res.data.data.pageData;
            if (this.DLoptions.length > 0) {
              this.sels = [];
            }
          } else {
            this.Info(res.data.message);
          }
        }
      );
    },
    submitForm(formName) {
      if (!this.addMsg.CoverPhoto) {
        this.Error("请上传logo");
        return;
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.fxsList.length === 0) {
            this.addMsg.AgentIds = "";
          } else {
            this.addMsg.AgentIds = this.fxsList
              .map((e) => {
                return e.UserId;
              })
              .toString();
          }
          this.apipost(
            "/api/Education/AddOrUpdateEduSchool",
            this.addMsg,
            (res) => {
              if (res.data.resultCode == 1) {
                this.Success(res.data.message);
                this.$router.push("/schoolAndCompanyList");
              }
            }
          );
        } else {
          return;
        }
      });
    },
    showFXS() {
      this.showDialog = true;
    },
    handleSelectionChange(val) {
      this.sels = val;
    },
    dighandleCurrentChange(val) {
      this.DistributorMsg.pageIndex = val;
      this.GetDistributorInfoList();
    },
    confirm() {
      this.showDialog = false;
      if (this.sels.length > 0) {
        this.sels.map((e) => {
          let search = this.fxsList.filter((_e) => {
            return _e.UserId == e.UserId;
          });
          if (search.length == 0) {
            this.fxsList.push(e);
          }
        });
      }
    },
    // 删除分销商
    delFXS(index) {
      this.fxsList.splice(index, 1);
    },
  },
};
</script>
<style scoped>
.addfxs .content {
  background: #fff;
  margin-top: 10px;
  padding: 20px;
  box-sizing: border-box;
}
.logo-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.logo-uploader .el-upload:hover {
  border-color: #409eff;
}
.logo-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px dashed #111;
}
.logo {
  width: 178px;
  height: 178px;
  display: block;
}
.check-box {
  display: flex;
  flex-wrap: wrap;
}
.check-box-item {
  margin-right: 10px;
  margin-bottom: 10px;
  position: relative;
}
.del-icon {
  position: absolute;
  top: 0;
  right: 0;
  color: #f00;
  z-index: 10;
  font-size: 16px;
}
.addfxs .app-image {
  background-size: cover;
  background-position: center center;
  width: 80px;
  height: 80px;
  border-radius: 0%;
  margin-right: 10px;
}
.digbox {
  height: 55vh;
  overflow-y: scroll;
}
</style>
