<style>
.VotingManagement ._addUpload_box {
  display: block;
  margin: 10px 0 0;
}
.VotingManagement ._addUpload_box img {
  height: 15px;
  display: block;
  margin-right: 25px;
}
.VotingManagement ._addUpload_box > div.el-upload {
  float: left;
  width: 138px;
  height: 92px;
  border: 1px dashed rgba(210, 210, 210, 1);
  border-radius: 2px;
  cursor: pointer;
  margin-bottom: 10px;
  padding: 5px;
  margin-right: 10px;
  position: relative;
}
.VotingManagement ._addUpload_box .icon-guanbi1 {
  font-size: 12px;
  color: white;
  display: inline-block;
  margin-left: 15px;
  position: absolute;
  left: 9px;
  top: -5px;
  background-color: #f56c6c;
  border-radius: 50%;
  height: 15px;
  width: 15px;
  text-align: center;
  line-height: 15px;
}
.VotingManagement ._addUpload_box > div:hover {
  background-color: #f5f5f5;
}
.VotingManagement .el-upload-dragger {
  font-size: 28px;
  color: #8c939d;
  width: 126px;
  height: 80px;
  line-height: 41px;
  text-align: center;
}
.VotingManagement .bg_color_delete{
  background-color: #ee4454;
  border-color: #ee4454;
}
.VotingManagement .btn-bg-b{
  background-color: #409EFF;
  color: white;
  padding: .4rem .6rem;
  background-color: #409EFF;
  color: white;
  padding: .4rem .6rem;
  cursor: pointer;
}
</style>

<template>
  <div class="flexOne VotingManagement">
    <div class="query-box">
      <ul class>
        <li>
          <span>
            <em>名称</em>
            <el-input v-model="msg.Title"></el-input>
          </span>
        </li>
        <li>
          <input type="button" @click="getList" class="hollowFixedBtn" value="查询">
          <input
            type="button"
            @click="outerVisible = true,dialogTitle='新增', addMsg.reqType = 'add',resetInfo()"
            class="normalBtn"
            :value="$t('pub.addBtn')"
          >
        </li>
      </ul>
    </div>

    <div class="clearfix"></div>
    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
      <tr>
        <th>排序</th>
        <th>标题</th>
        <th>公司</th>
        <th>开始/结束时间</th>
        <th>操作</th>
      </tr>
      <tr v-for="item in dataList">
        <td>{{item.Sort}}</td>
        <td>{{item.Title}}</td>
        <td>{{item.BranchName}}</td>
        <td>{{item.StartDate.replace('T', ' ')}} - {{item.EndDate.replace('T', ' ')}}</td>
        <td>
          <el-tooltip class="item" effect="dark" :content="$t('fnc.chakan')"  placement="top">
            <el-button
              type="success"
              icon="iconfont icon-sousuo"
              circle
              @click="getDetails(item.ID)"
            ></el-button>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="修改"
            placement="top"
          >
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="outerVisible=true,dialogTitle='修改',updateData(item)"
            ></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top">
            <el-button type="primary" class="bg_color_delete" icon="el-icon-delete" circle @click="Delete(item)"></el-button>
          </el-tooltip>
        </td>
      </tr>
    </table>
    <div class="noDataNotice" v-if="dataList.length<1">
      <i class="iconfont icon-kong"></i>
      <p>{{$t("active.ld_noData")}}</p>
    </div>
    <el-pagination background @current-change="handleCurrentChange" layout="total,prev, pager, next, jumper" :page-size=msg.pageSize :total=total>
		</el-pagination>
    <el-dialog
      custom-class="w400"
      :title="dialogTitle"
      :visible.sync="outerVisible"
      center
      :before-close="closeChangeMachie"
    >
      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="130px">
        <el-form-item label="问题名称" prop="Title">
          <el-input v-model="addMsg.Title" class="w217"/>
        </el-form-item>
        <el-form-item label="公司" prop="RB_Branch_Id">
            <el-select filterable   v-model='addMsg.RB_Branch_Id' :placeholder="$t('pub.unlimitedSel')">
                <el-option :label="$t('pub.unlimitedSel')" value='-1'></el-option>
                <el-option v-for='item in companyList' 
                    :label='item.BName'
                    :value='item.Id'
                    :key='item.Id'>
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="开始时间" prop="StartDate">
          <el-date-picker :picker-options="pickerOptions0" v-model='addMsg.StartDate' class='w217'  value-format="yyyy-MM-dd" type="date"></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="EndDate">
          <el-date-picker :picker-options="pickerOptions0" v-model='addMsg.EndDate' class='w217'  value-format="yyyy-MM-dd" type="date"></el-date-picker>
        </el-form-item>
        <div>
            <template v-for="(item, index) in addMsg.VoteOptionsList">
                <el-form-item :label="`选项${index+1}`" >
                <el-input v-model="item.OptionsName" class="w217">
                    <el-button @click="deleItem(index)" slot="append" icon="el-icon-delete"></el-button>
                </el-input>
                </el-form-item>
                <el-form-item label="排序" >
                <el-input v-model="item.Sort" class="w217"/>
                </el-form-item>
            </template>
            <el-form-item label="" >
                <span class="btn-bg-b" @click="addList()">+增加</span>
            </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <button
          class="hollowFixedBtn"
          @click="outerVisible = false, resetForm('addMsg')"
        >{{$t('pub.cancelBtn')}}</button> &nbsp;
        <button class="normalBtn" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button>
      </div>
    </el-dialog>
    <Voting v-show="VotingShow" :NowVoteData="NowVoteData" :NowVoteType="NowVoteType"></Voting>
  </div>
</template>
<script>
import Voting from "./model/Voting";
export default {
  components: {
    Voting
  },
  data() {
    return {
        //请求
        msg: {
            pageIndex: 1,
            pageSize: 15,
            Title: ''
        },
        addMsg: {
            Title: "",
            SurveyType: '1',
            IsShow: 1,
            Sort: 0,
            StartDate: '',
            EndDate: '',
            RB_Branch_Id: '-1',
            VoteOptionsList: [
            {
                OptionsName: '',
                Sort: 0,
                ID: 0,
            }
            ]
        },
        total:0,
        rules: {
            Title: [
            { required: true, message: "请输入名称", trigger: "blur" }
            ],
            RB_Branch_Id: [
            { required: true, message: "请选择公司", trigger: "change" }
            ],
            StartDate: [
            { required: true, message: "请选择开始时间", trigger: "change" }
            ],
            EndDate: [
            { required: true, message: "请选择结束时间", trigger: "change" }
            ]
        },
        loading: false,
        outerVisible: false,
        dialogTitle: "",
        dataList: [],
        TypeList: [],
        companyMsg:{
            RB_Group_Id:"0",
            Status:0,
        },
        companyList: [],
        pickerOptions0: {
            
        },
        NowVoteData: {},
        VotingShow: false,
        NowVoteType: 2,
    };
  },
  mounted() {
    let userInfo=this.getLocalStorage()
    this.companyMsg.RB_Group_Id=userInfo.RB_Group_id //集团
    this.getList()
    this.getTypeList()
    this.getCompany()
    let that = this
    this.MsgBus.$on('closeVotingBox', function () {
      that.VotingShow = false
    });
  },
  filters: {},

  methods: {
    getDetails (ID) {
      this.apipost(
        "user_post_GetVote",
        {VoteID: ID},
        res => {
          if (res.data.resultCode === 1) {
            let data = res.data.data
            this.NowVoteData = data
            this.VotingShow = true
          } else {
            this.Error(res.data.message);
          }
        },
        null
      );
    },
    getCompany(){ //公司
        this.apipost('admin_get_BranchGetList', this.companyMsg, res => {
            this.companyList = res.data.data;
        }, err => {})	
    },
    // 获取类型名称
    getTypeName: function (type) {
      if (type === 1) {
        return '打分'
      } else if (type === 2) {
        return '单选'
      } else if (type === 3) {
        return '多选'
      } else if (type === 4) {
        return '输入'
      }
    },
    // 切换类型
    changeType: function (i) {
      if (i === '1' || i === '4') {
        this.addMsg.VoteOptionsList = [
          {
            OptionsName: '',
            Sort: 0,
            ID: 0,
          }
        ]
      }
    },
    // 删除选项
    deleItem: function (i) {
      if (this.addMsg.VoteOptionsList.length) {
        this.addMsg.VoteOptionsList.splice(i, 1)
      }
    },
    // 新增选项
    addList: function () {
      this.addMsg.VoteOptionsList.push({
        OptionsName: '',
        ID: 0,
      })
    },
    getTypeList: function () {
      this.apipost('survey_post_GetSurveyTypeEnumList', {}, res=>{
        if (res.data.resultCode === 1) {
          this.TypeList = res.data.data
        }
      }, null)
    },
    // 删除
    Delete(item) {
      this.$confirm("是否删除? 删除后不可恢复", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.apipost(
            "user_post_DelVote",
            {VoteID: item.ID },
            res => {
              if (res.data.resultCode == 1) {
                this.Success(res.data.message);
                this.getList();
              } else {
                this.Error(res.data.message);
              }
            },
            err => {}
          );
        })
        .catch(() => {});
    },
    //获取数据
    getList() {
      this.loading = true;
      this.apipost(
        "user_post_GetVotePageList",
        this.msg,
        res => {
          this.loading = false;
          if (res.data.resultCode === 1) {
            this.dataList = res.data.data.pageData;
            this.total= res.data.data.count;
          } else {
            this.Error(res.data.message);
          }
        },
        null
      );
    },
    //提交
    submitForm(addMsg) {
      //提交创建、修改表单
      this.$refs[addMsg].validate(valid => {
        if (valid) {
          this.addAward();
        } else {
          return false;
        }
      });
    },
    //提交添加
    addAward() {
      this.apipost(
        "user_post_SetVote",
        this.addMsg,
        res => {
          if (res.data.resultCode === 1) {
            this.Success(res.data.message);
            this.outerVisible = false;
            this.getList();
          } else {
            this.Error(res.data.message);
          }
        },
        null
      );
    },
    //修改信息
    updateData(item) {
      this.outerVisible = true; 
      this.apipost(
        "user_post_GetVote",
        {VoteID: item.ID},
        res => {
          if (res.data.resultCode === 1) {
            let data = res.data.data
            data.SurveyType = ''+data.SurveyType
            data.RB_Branch_Id = data.RB_Branch_Id + ''
            this.addMsg = data
            this.getList();
          } else {
            this.Error(res.data.message);
          }
        },
        null
      );
    },
    //重置信息
    resetInfo() {
      var newMsg = {
        Title: "",
        SurveyType: '1',
        IsShow: 1,
        Sort: 0,
        StartDate: '',
        EndDate: '',
        RB_Branch_Id: '-1',
        VoteOptionsList: [
          {
            OptionsName: '',
            Sort: 0,
            ID: 0,
          }
        ]
      };
      this.addMsg = newMsg;
    },
    closeChangeMachie(done) {
      //弹出框关闭初始化弹框内表单
      done();
      this.resetForm("addMsg");
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleCurrentChange(val){
      this.msg.pageIndex=val;
      this.getList();
    },
  }
};
</script>