<style>
  .WebSiteCertificate .el-button.is-circle {
    padding: 6px;
  }

  .WebSiteCertificate .w256 {
    width: 256px !important;
  }

</style>
<template>
  <!--护照签证资料-->
  <div class="WebSiteCertificate">
    <div class="query-box">
      <ul>
        <li>
          <label>名称</label>
          <el-input v-model="msg.CertificateName" :placeholder="$t('system.ph_in')" @keyup.native.enter="getData"
            class="w210">
          </el-input>
        </li>
        <li>
          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')"
            @click="resetPageIndex(),getData()" />
          <input type="button" class="normalBtn" @click="outerVisible=true,clearMsg()" value="新增证件" />
          <input type="button" class="normalBtn" value="浏览前台页面" />
        </li>
      </ul>
    </div>
    <div>
      <el-table :data="dataList" style="width: 100%" v-loading="loading"
        :default-sort="{prop: 'date', order: 'descending'}">
        <el-table-column prop="CertificateName" label="证件名称" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="CountryName" label="国家" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="Fee" label="办件费用" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="B2CFee" label="直客费用" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="Validity" label="证件效期" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="StayDay" label="可停留天数" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="WorkDay" label="工作天" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="IsShowBefore" label="前台显示" header-align="center" align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.IsShowBefore" :active-value="1" :inactive-value="0" active-color="#13ce66"
              inactive-color="#dcdfe6" @change="UpdateIsShowBefore(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" header-align="center" align="center">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="$t('system.table_edit')" placement="top-start">
              <el-button type="primary" icon="el-icon-edit" circle @click="outerVisible = true,updateData(scope.row)">
              </el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="$t('system.table_delete')" placement="top-start">
              <el-button type="danger" icon="el-icon-delete" circle @click="deleteData(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
        layout="total,prev, pager, next, jumper" :page-size='msg.pageSize' :total=total>
      </el-pagination>
    </div>

    <el-dialog title="新增证件资料" :visible.sync="outerVisible" center width="800px">
      <el-form :model="addMsg" ref="addMsg" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="证件名称">
              <el-input type="text" v-model="addMsg.CertificateName" maxlength="50" placeholder="证件名称">
              </el-input>
            </el-form-item>
            <el-form-item label="工作天">
              <el-input type="text" v-model="addMsg.WorkDay" maxlength="3"
                @keyup.native="checkInteger(addMsg,'WorkDay')" placeholder="工作天">
              </el-input>
            </el-form-item>
            <el-form-item label="直客费用">
              <el-input type="text" v-model="addMsg.B2CFee" maxlength="8" @keyup.native="checkPrice(addMsg,'B2CFee')"
                placeholder="直客费用">
              </el-input>
            </el-form-item>
            <el-form-item label="可停留天数">
              <el-input type="text" v-model="addMsg.StayDay" maxlength="3"
                @keyup.native="checkInteger(addMsg,'StayDay')" placeholder="可停留天数">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="国家">
              <el-select v-model="addMsg.CountryId" class="w256" filterable>
                <el-option label="请选择" :value="0" :key="0"></el-option>
                <el-option v-for="subItem in CountryList" :key="subItem.ID" :label="subItem.Name" :value="subItem.ID">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="办证费用">
              <el-input type="text" v-model="addMsg.Fee" maxlength="8" @keyup.native="checkPrice(addMsg,'Fee')"
                placeholder="办证费用">
              </el-input>
            </el-form-item>
            <el-form-item label="证件效期">
              <el-input type="text" v-model="addMsg.Validity" maxlength="20" placeholder="10年">
              </el-input>
            </el-form-item>
            <el-form-item label="注意事项">
              <el-input type="textarea" v-model="addMsg.Notice" :rows="4" placeholder="注意事项">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <button class="normalBtn" type="primary" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button> &nbsp;
        <button class="hollowFixedBtn" @click="outerVisible = false">{{$t('pub.cancelBtn')}}</button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        loading: false,
        msg: {
          CertificateName: '', //名称
          pageSize: 15,
          pageIndex: 1,
        },
        total: 0,
        currentPage: 1,
        //弹窗
        outerVisible: false,
        dataList: [],
        addMsg: {
          Id: 0, //编号
          CertificateName: '', //证件名称
          CountryId: 0, //国家
          WorkDay: 7, //工作天
          Fee: 0, //办证费用
          B2CFee: 0, //直客费用
          Validity: '', // 证件效期
          StayDay: 7, //可停留天数
          Notice: '' //注意事项
        },
        CountryList: [], //国家列表
      }
    },
    mounted() {
      this.getCountry();
      this.getData();
    },
    methods: {
      //获取国家列表
      getCountry() {
        this.apipost(
          "dict_post_Destination_GetCountry", {},
          res => {
            if (res.data.resultCode == 1) {
              this.CountryList = res.data.data;
            }
          },
          err => {}
        );
      },
      //获取护照签证列表
      getData() {
        this.loading = true;
        this.apipost(
          "ws_get_GetCertificatePageList",
          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.loading = false;
            }
          },
          err => {}
        );
      },
      handleCurrentChange(val) {
        //翻页功能按钮
        this.msg.pageIndex = val;
        this.getData();
      },
      resetPageIndex() {
        //查询初始化页码
        this.msg.pageIndex = 1;
        this.currentPage = 1;
      },
      //更新页面显示状态
      UpdateIsShowBefore(item) {
        this.apipost(
          "ws_post_UpdateCertificateIsShowBefore", {
            Id: item.Id,
            IsShowBefore: item.IsShowBefore
          },
          res => {
            if (res.data.resultCode == 1) {
              this.Success(res.data.message);
              this.getData();
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },
      //修改
      updateData(item) {
        this.apipost(
          "ws_get_GetCertificate", {
            Id: item.Id,
          },
          res => {
            if (res.data.resultCode == 1) {
              var tempData = res.data.data;
              this.addMsg.Id = tempData.Id;
              this.addMsg.CertificateName = tempData.CertificateName;
              this.addMsg.CountryId = tempData.CountryId;
              this.addMsg.WorkDay = tempData.WorkDay;
              this.addMsg.Fee = tempData.Fee;
              this.addMsg.B2CFee = tempData.B2CFee;
              this.addMsg.Validity = tempData.Validity;
              this.addMsg.StayDay = tempData.StayDay;
              this.addMsg.Notice = tempData.Notice;
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },
      //删除
      deleteData(item) {
        var that = this;
        that.Confirm("是否删除?", function () {
          that.apipost(
            "ws_post_RemoveCertificate", {
              Id: item.Id
            },
            res => {
              if (res.data.resultCode == 1) {
                that.Success(res.data.message);
                that.getData();
              } else {
                that.Error(res.data.message);
              }
            },
            null
          );
        });
      },
      //清空数据
      clearMsg() {
        this.addMsg.Id = 0;
        this.addMsg.CertificateName = "";
        this.addMsg.CountryId = 0;
        this.addMsg.WorkDay = 7;
        this.addMsg.Fee = 0;
        this.addMsg.B2CFee = 0;
        this.addMsg.Validity = '';
        this.addMsg.StayDay = 7;
        this.addMsg.Notice = '';
      },
      //新增
      submitForm(addMsg) {
        this.apipost(
          "ws_post_SetCertificate", this.addMsg,
          res => {
            if (res.data.resultCode == 1) {
              this.getData();
              this.clearMsg();
              this.Success(res.data.message);
              this.outerVisible = false;
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },
    }
  }

</script>