<style>
  .height_auto.el-select .el-input {
    height: auto;
  }

  .CommodityType ._addUpload_box {
    display: block;
    margin: 10px 0 0;
  }

  .CommodityType ._addUpload_box img {
    height: 15px;
    display: block;
    margin-right: 25px;
  }

  .CommodityType ._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;
  }

  .CommodityType ._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;
  }

  .CommodityType ._addUpload_box>div:hover {
    background-color: #f5f5f5;
  }

  .CommodityType .el-upload-dragger {
    font-size: 28px;
    color: #8c939d;
    width: 126px;
    height: 80px;
    line-height: 41px;
    text-align: center;
  }

  .CommodityType .bg_color_delete {
    background-color: #ee4454;
    border-color: #ee4454;
  }

  .comType_Img {
    max-height: 50px;
  }

</style>

<template>
  <div class="flexOne CommodityType">
    <div class="query-box">
      <ul class>
        <li>
          <span>
            <em>{{$t('system.query_airName')}}</em>
            <el-input v-model="msg.Title"></el-input>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('advmanager.v_type')}}</em>
            <el-select filterable v-model="msg.SurveyType">
              <el-option :label="$t('system.ph_buxian')" :value="-1"></el-option>
              <el-option v-for="item in TypeList" :label="item.Name" :value="item.Id" :key="item.Id"></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('system.table_isShow')}}</em>
            <el-select filterable v-model="msg.IsShow">
              <el-option :label="$t('system.ph_buxian')" :value="-1"></el-option>
              <el-option :label="$t('system.table_isShows')" :value="1" :key="1"></el-option>
              <el-option :label="$t('MarketingActi.notShow')" :value="0" :key="0"></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <input type="button" @click="getList" class="hollowFixedBtn" :value="$t('pub.searchBtn')">
          <input
            type="button"
            @click="outerVisible = true,dialogTitle=$t('pub.addBtn'), 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 width="600px">{{$t('objFill.wentiminc')}}</th>
        <th width="600px">所属问卷</th>
        <th>{{$t('advmanager.v_type')}}</th>
        <th>{{$t('system.table_rank')}}</th>
        <th>{{$t('system.table_isShow')}}</th>
        <th width="120px">{{$t('hotel.table_operat')}}</th>
      </tr>
      <tr v-for="(item,index) in dataList" :key="index">
        <td>{{item.Title}}</td>
        <td>{{item.MainTitle}}</td>
        <td>{{getTypeName(item.SurveyType)}}</td>
        <td>
          {{item.Sort}}
        </td>
        <td>
           {{item.IsShow === 1 ? $t('system.table_isShows') : $t('MarketingActi.notShow')}}
        </td>
        <td>
          <el-tooltip
            class="item"
            effect="dark"
            :content="$t('active.ld_editInfo')"
            placement="top"
          >
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="outerVisible=true,dialogTitle=$t('pub.updateMsg'),updateData(item)"
            ></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" :content="$t('system.table_delete')" 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="$t('objFill.wentiminc')" prop="Title">
          <el-input v-model="addMsg.Title" class="w217"/>
        </el-form-item>
        <el-form-item :label="$t('objFill.wentileixing')" prop="SurveyType">
          <el-select filterable v-model="addMsg.SurveyType" @change="changeType(addMsg.SurveyType)">
            <el-option v-for="item in TypeList" :label="item.Name" :value="item.Id" :key="item.Id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('system.table_isShow')" prop="IsShow">
          <el-radio v-model="addMsg.IsShow" :label="1">{{$t('system.table_isShows')}}</el-radio>
          <el-radio v-model="addMsg.IsShow" :label="0">{{$t('MarketingActi.notShow')}}</el-radio>
        </el-form-item>

        <el-form-item :label="$t('system.table_rank')" prop="Sort">
          <el-input v-model="addMsg.Sort" class="w217"/>
        </el-form-item>
        <template>
          <div v-if="addMsg.SurveyType === '2' || addMsg.SurveyType === '3'">
            <template v-for="(item, index) in addMsg.SurveyOptionsList">
              <el-form-item :label="`${$t('objFill.xuanxiang')}${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="$t('system.table_rank')" >
                <el-input v-model="item.Sort" class="w217"/>
              </el-form-item>
            </template>
            <el-form-item label="" >
              <span @click="addList()">{{$t('objFill.zhengjia')}}</span>
            </el-form-item>
          </div>
        </template>
      </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>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        //请求
        msg: {
          pageIndex: 1,
          pageSize: 15,
          IsShow: -1,
          SurveyType: -1,
          Title: '',
          MainId: 0,
        },
        addMsg: {
          MainId: 0,
          Title: "",
          SurveyType: '1',
          IsShow: 1,
          Sort: 0,
          SurveyOptionsList: [{
            OptionsName: '',
            Sort: 0,
            ID: 0,
          }]
        },
        total: 0,
        rules: {
          Title: [
            { required: true, message:  this.$t('system.ph_name'), trigger: "blur" }
          ],
          Sort: [
            { required: true, message: this.$t('objFill.v101.administrative.qingshurpx'), trigger: "blur" }
          ]
        },
        loading: false,
        outerVisible: false,
        dialogTitle: "",
        dataList: [],
        TypeList: [],
      };
    },
    created() {
      if (this.$route.query.MainId && this.$route.query.MainId > 0) {
        this.msg.MainId = this.$route.query.MainId;
        this.addMsg.MainId = this.$route.query.MainId;

      }
    },
    mounted() {
      this.getList();
      this.getTypeList();
    },
    methods: {
      // 获取类型名称
      getTypeName: function (type) {
        if (type === 1) {
          return this.$t('objFill.wenquantclx')[0]
        } else if (type === 2) {
          return this.$t('objFill.wenquantclx')[1]
        } else if (type === 3) {
          return this.$t('objFill.wenquantclx')[2]
        } else if (type === 4) {
          return this.$t('objFill.wenquantclx')[3]
        }
      },
      // 切换类型
      changeType: function (i) {
        if (i === '1' || i === '4') {
          this.addMsg.SurveyOptionsList = [{
            OptionsName: '',
            Sort: 0,
            ID: 0,
          }]
        }
      },
      // 删除选项
      deleItem: function (i) {
        if (this.addMsg.SurveyOptionsList.length) {
          this.addMsg.SurveyOptionsList.splice(i, 1)
      }
    },
    // 删除
    Delete(item) {
      this.$confirm(this.$t('objFill.shifouscbkhf'), this.$t('tips.tips'), {
        confirmButtonText: this.$t('pub.sureBtn'),
        cancelButtonText: this.$t('pub.cancelBtn'),
        type: "warning"
      })
        .then(() => {
          this.apipost(
            "survey_post_DelSurvey",
            {SurveyID: 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(
        "survey_post_GetPageList",
        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;
        }
      })
    },
      // 新增选项
      addList: function () {
        this.addMsg.SurveyOptionsList.push({
          OptionsName: '',
          ID: 0,
        })
      },
      getTypeList: function () {
        this.apipost('survey_post_GetSurveyTypeEnumList', {}, res => {
          if (res.data.resultCode === 1) {
            this.TypeList = res.data.data
          }
        }, null)
      },
    //修改信息
    updateData(item) {
        this.outerVisible = true;
        this.apipost(
          "survey_post_GetSurvey", {
            SurveyID: item.ID
          },
          res => {
            if (res.data.resultCode === 1) {
              let data = res.data.data
              data.SurveyType = '' + data.SurveyType
              this.addMsg = data
              this.getList();
            } else {
              this.Error(res.data.message);
            }
          },
          null
        );
      },
      //提交添加
      addAward() {
        this.apipost(
          "survey_post_SetSurvey",
          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
        );
      },

      //重置信息
      resetInfo() {
        this.addMsg.Title = "";
        this.addMsg.SurveyType = "";
        this.addMsg.IsShow = 1;
        this.addMsg.Sort = 0;
        this.addMsg.SurveyOptionsList = [{
          OptionsName: '',
          Sort: 0,
          ID: 0,
        }];
      },
      closeChangeMachie(done) {
        //弹出框关闭初始化弹框内表单
        done();
        this.resetForm("addMsg");
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
    }
  };
</script>