<style>
  .LM_mainDiv {
    overflow-y: auto;
  }

  .LP_table {
    margin-top: 10px;
    background-color: #fff;
    border-top: 1px solid #d1d1d1;
    font-size: 14px;
    width: 100%;
    min-width: 1200px;
    padding-bottom: 5px;
  }

  .LP_table tr {
    height: 40px;
  }


  .LP_table tr th {
    border-left: 1px solid #d1d1d1;
    border-bottom: 1px solid #d1d1d1;
    position: relative;
    background-color: #E6E6E6;
  }

  .LP_table tr th:last-child {
    border-right: 1px solid #d1d1d1;
  }

  .LP_table td {
    border-left: 1px solid #d1d1d1;
    border-bottom: 1px solid #d1d1d1;
    text-align: center;
    padding: 5px 0;
  }

  .LP_table td:last-child {

    border-right: 1px solid #d1d1d1;
  }

  .LP_table .el-button--primary {
    padding: 5px;
  }

  .Lp_role {
    position: absolute;
    top: 15px;
    left: 30px;
  }

  .Lp_company {
    position: absolute;
    right: 30px;
    top: 5px;
  }

  .comLessDiv {
    width: 100%;
    height: 40px;
    margin-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #d1d1d1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .comLessDiv:last-child {
    border: 0;
    padding-bottom: 0;
  }

  .comLessDiv input {
    padding: 0 5px;
  }

  .comLessDiv .el-input-group__append,
  .comLessDiv .el-input-group__append button {
    padding: 0 8px;
    cursor: pointer;
  }

  .addLessPrice {
    margin-left: 10px;
    color: seagreen;
    cursor: pointer;
  }

  .lessBtn {
    margin-top: 5px;
  }

</style>

<template>
  <div>
    <div class="LM_mainDiv">
      <!--保存-->
      <table border="0" cellspacing="0" cellpadding="0" class="LP_table" v-loading="this.loading">
        <thead>
          <tr>
            <th width="30%">{{$t('objFill.wentiminc')}}</th>
            <th width="30%">{{$t('objFill.wentileixing')}}</th>
            <th width="40%">{{$t('hotel.table_operat')}}&nbsp;&nbsp; <i
                class="iconfont icon-bumenguanli-tianjia addLessPrice" @click="AddQuestion(null)"></i></th>
          </tr>
        </thead>
        <tbody v-for="(item,index) in dataList" :key="index+10000">
          <tr>
            <td>
              {{item.Name}}
            </td>
            <td>
              <template v-if="item.Code==1">
                {{$t('objFill.wenquantclx')[1]}}
              </template>
              <template v-if="item.Code==2">
                {{$t('objFill.wenquantclx')[2]}}
              </template>
              <template v-if="item.Code==3">
                {{$t('objFill.v101.xialaxuanze')}}
              </template>
              <template v-if="item.Code==4">
                {{$t('objFill.v101.wenben')}}
              </template>
              <template v-if="item.Code==5">
                {{$t('objFill.v101.tuwen')}}
              </template>
            </td>
            <td>
              <input type='button' class="normalBtn lessBtn" @click="AddQuestion(item)" :value="$t('pub.edit')" />
              <input type='button' class="normalBtn lessBtn" @click="RemoveItem( item, index)" :value="$t('system.table_delete')" />
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <el-dialog :title="opTitle" custom-class="w500" :visible.sync="isShowEdit" center>
      <el-form :model="postMsg" label-width="100px">
        <el-form-item :label="$t('objFill.v101.biaoqminc')">
          <el-input v-model="postMsg.Name" style="width:220px;"></el-input>
        </el-form-item>
        <el-form-item :label="$t('objFill.v101.biaoqianlix')">
          <el-select v-model="postMsg.Code" @change="changeType()">
            <el-option :key="0" :value="0" :label="$t('pub.pleaseSel')"></el-option>
            <el-option v-for="item in qTypeList" :key="item.Id" :label="item.Name" :value="item.Id">
            </el-option>
          </el-select>
        </el-form-item>
        <template v-if="postMsg.Code==1||postMsg.Code==2||postMsg.Code==3">
          <table>
            <thead>
              <tr>
                <td>
                  <p class="edit_form_box_tit">{{$t('objFill.v101.wentineir')}}</p>
                </td>
                <td>
                  <div class="TFAddFlight" @click="addOption()" style="cursor:pointer; float:right;">
                    <i class="iconfont icon-img_haha"></i>{{$t('fnc.tianjia')}}
                  </div>
                </td>
              </tr>
            </thead>
            <tbody v-for="(item,index) in  postMsg.OptionList" :key="index">
              <tr>
                <td>
                  <el-input v-model="item.Name" :placeholder="$t('system.query_airName')"></el-input>
                </td>
                <td>
                  <el-input v-model="item.Sort" :placeholder="$t('system.table_rank')"></el-input>
                </td>
                <td>
                  <a style="cursor:pointer;color:blue" @click="deleteOption(index)">{{$t('system.table_delete')}}</a>
                </td>
              </tr>
            </tbody>
          </table>
        </template>
        <template v-if="postMsg.Code==4">
          <el-form-item :label="$t('objFill.v101.wenbenneir')">
            <el-input type="text" disabled style="width:220px"></el-input>
          </el-form-item>
        </template>
        <template v-if="postMsg.Code==5">
          <el-form-item :label="$t('objFill.v101.wenbenneir')">
            <el-input type="text" disabled style="width:220px"></el-input>
          </el-form-item>
          <el-form-item :label="$t('objFill.fj')">
            <el-upload action="" list-type="picture-card">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <button class="normalBtn" type="primary" @click="submitForm()">{{$t('pub.saveBtn')}}</button> &nbsp;
        <button class="hollowFixedBtn" @click="isShowEdit = false">{{$t('pub.cancelBtn')}}</button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        //列表
        dataList: [],
        loading: false,
        isShowEdit: false, //是否显示弹窗
        postMsg: {
          ID: 0,
          DictKey: "DouYin_MainOrder",
          Name: "",
          Code: 0, //1-单选，2-多选，3-下拉，4-文本，5-图文
          Content: "",
          OptionList: [],
        },
        qTypeList: [{
            Id: 1,
            Name: this.$t('objFill.wenquantclx')[1]
          },
          {
            Id: 2,
            Name: this.$t('objFill.wenquantclx')[2]
          },
          {
            Id: 3,
            Name: this.$t('objFill.v101.xialaxuanze')
          },
          {
            Id: 4,
            Name: this.$t('objFill.v101.wenben')
          },
          {
            Id: 5,
            Name: this.$t('objFill.v101.tuwen')
          },
        ],
        optionMsg: {
          Name: "",
          Sort: 0,
        },
        opTitle: this.$t('objFill.v101.xinzengwenti')
      };
    },
    methods: {
      //显示弹窗
      AddQuestion(obj) {
        this.opTitle = this.$t('objFill.v101.xinzengwenti');
        this.isShowEdit = true;
        if (obj && obj.ID > 0) {
          this.opTitle = this.$t('objFill.v101.bianjiwenti');
          this.postMsg.ID = obj.ID;
          this.postMsg.Name = obj.Name;
          if (obj.Code) {
            this.postMsg.Code = Number(obj.Code);
          }
          if (obj.Content) {
            this.postMsg.Content = obj.Content;
          }
          if (this.postMsg.Code == 1 || this.postMsg.Code == 2 || this.postMsg.Code == 3) {
            if (obj.OptionList && obj.OptionList.length > 0) {
              this.postMsg.OptionList = obj.OptionList;
            }
          }
        } else {
          this.postMsg.ID = 0;
          this.postMsg.Name = "";
          this.postMsg.Code = 0;
          this.postMsg.Content = "";
          this.postMsg.OptionList = [];
        }
      },
      //类型转换
      changeType() {
        if (this.postMsg.Code == 1 || this.postMsg.Code == 2 || this.postMsg.Code == 3) {
          var mObj = JSON.parse(JSON.stringify(this.optionMsg));
          this.postMsg.OptionList.push(mObj)
        }
      },
      //添加选项
      addOption() {
        var mObj = JSON.parse(JSON.stringify(this.optionMsg));
        this.postMsg.OptionList.push(mObj);
      },
      //删除选项
      deleteOption(index) {
        var that = this;
        this.Confirm(that.$t('objFill.v101.shifshanccxian'), function () {
          that.postMsg.OptionList.splice(index, 1);
        })
      },
      //提交表单
      submitForm() {
        if (this.postMsg.Name == '') {
          return this.Error(this.$t('objFill.v101.qingtianxwentbti'));
        }
        if ((this.postMsg.Code == 1 || this.postMsg.Code == 2 || this.postMsg.Code == 3) && this.postMsg.OptionList &&
          this.postMsg.OptionList.length > 0) {
          this.postMsg.Content = JSON.stringify(this.postMsg.OptionList);
        }
        this.apipost(
          "dict_post_Set", this.postMsg,
          res => {
            if (res.data.resultCode == 1) {
              this.Success(res.data.message);
              this.getList();
            } else {
              this.Error(res.data.message);
            }
          },
        );
      },
      //获取列表
      getList() {
        this.isShowEdit = false;
        this.loading = true;
        var that = this;
        that.apipost(
          "dict_post_GetDouYinConfigList", {
            Key: 'DouYin_MainOrder'
          },
          res => {
            that.loading = false;
            if (res.data.resultCode == 1) {
              var data = res.data.data;
              that.dataList = data;
            } else {
              that.Error(res.data.message);
            }
          },
        );
      },
      //获取列表
      RemoveItem(subItem, index) {
        if (subItem.ID == 0) {
          this.dataList.splice(index, 1);
          return;
        }
        var that = this;
        this.Confirm(that.$t('objFill.v101.shifscciwti'), function () {
          if (subItem.ID > 0) {
            that.apipost(
              "dict_post_Remove", {
                dictID: subItem.ID
              },
              res => {
                if (res.data.resultCode == 1) {
                  that.Success(this.$t('tips.czchenggong'));
                  that.getList();
                } else {
                  that.Error(res.data.message);
                }
              },
              err => {}
            );
          }
        });
      },
    },
    mounted() {
      this.getList();
    },
  };

</script>
