<template>
  <!-- 视屏教程配置 -->
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;">
      <!-- 模块 -->
      <div class="filter">
        <label>{{ $t("950041") }}：</label>
        <Select v-model="moduleType" clearable class="searchSelect">
          <!-- <Option
            v-for="item in moduleList"
            :value="item.id"
            :key="item.id"
            >{{ item. }}</Option
          > -->
        </Select>
      </div>
      <!-- 视频内容 -->
      <div class="filter">
        <label>{{ $t("视频内容") }}：</label>
        <Input class="searchInput" clearable type="text" v-model="content" />
      </div>
      <div class="searchBtn">
        <Button
          type="primary"
          class="twoWord"
          icon="ios-search"
          @click="Search()"
          >{{ $t("1001") }}</Button
        >
        <Button
          type="success"
          class="twoWord"
          icon="md-add-circle"
          @click="add()"
          >{{ $t("1002") }}</Button
        >
        <Button
          type="warning"
          class="twoWord"
          icon="ios-create-outline"
          @click="edit()"
          >{{ $t("1003") }}</Button
        >
        <Button
          type="error"
          class="twoWord"
          icon="md-close-circle"
          @click="del()"
          >{{ $t("1004") }}</Button
        >
      </div>
    </div>
    <!-- 表格/ 分页区域 -->
    <div class="divborder newTableDiv">
      <Table
        class="tableClass"
        highlight-row
        :data="tableData"
        :columns="tableColumns2"
        @on-current-change="handleRowChange"
      ></Table>
      <div class="pageDiv">
        <div class="pageDirection">
          <Page
            :total="total"
            :current="page"
            @on-change="changePage"
            show-elevator
            show-sizer
            show-total
            @on-page-size-change="handlePageSize"
            :page-size-opts="[10, 20, 30, 40, 100]"
          ></Page>
        </div>
      </div>
    </div>

    <!-- 添加/修改弹框 -->
    <Modal
      class="newModalClass"
      v-model="showModal"
      :styles="{ width: '660px' }"
    >
      <p slot="header">
        <span v-if="type == 1">{{ $t("1002") }}</span>
        <span v-if="type == 2">{{ $t("1003") }}</span>
      </p>
      <div class="Main">
        <!-- 模块 -->
        <div class="filter">
          <label>
            <i>*</i>
            {{ $t("950041") }}：
          </label>
          <Select v-model="addobj.moduleType" clearable class="searchSelect">
            <!-- <Option
            v-for="item in moduleList"
            :value="item.id"
            :key="item.id"
            >{{ item. }}</Option
          > -->
          </Select>
        </div>
        <!-- 视频文件名 -->
        <div class="filter">
          <label>
            <i>*</i>
            {{ $t("1236") }}：
          </label>
          <Input
            class="searchInput"
            clearable
            type="text"
            v-model="addobj.fileName"
          />
        </div>
        <!-- 视频内容 -->
        <div class="filter">
          <label>
            <i>*</i>
            {{ $t("1234") }}：
          </label>
          <Input
            class="searchInput"
            clearable
            type="text"
            v-model="addobj.content"
          />
        </div>
      </div>
      <div slot="footer">
        <Button type="text" size="large" @click="showModal = false">{{
          $t(1033)
        }}</Button>
        <Button
          type="primary"
          v-if="type == 1"
          size="large"
          @click="saveData(1)"
          >{{ $t("1002") }}</Button
        >
        <Button
          type="primary"
          v-if="type == 2"
          size="large"
          @click="saveData(2)"
          >{{ $t("1003") }}</Button
        >
      </div>
    </Modal>
  </div>
</template>
<script>
import axios from "@/libs/api.request";
export default {
  data() {
    return {
      total: 0, // 总条数
      page: 1, // 页码
      pagesize: 10, // 每页展示多少条数据
      showModal: false, // 对话框显示与隐藏
      moduleType: "", //  模块
      content: "", // 内容
      moduleType: "", // 模块
      tableData: [],
      detailsobj: {}, // 表格数据对象
      addobj: {}, // 添加数据对象
      type: 0, // type 为 1 是添加操作 type 为 2 是修改操作
      tableColumns2: [
        {
          type: "sort",
          title: this.$t("1008"),
          render: (h, params) => {
            return h(
              "span",
              params.index + (this.page - 1) * this.pagesize + 1
            );
          },
          width: "80px"
        },
        {
          title: this.$t("940011"), // ID
          key: ""
        },
        {
          title: this.$t("950041"), // 模块
          key: ""
        },
        {
          title: this.$t("1234"), // 视频内容
          key: ""
        },
        {
          title: this.$t("1236"), // 视频文件名
          key: ""
        },
        {
          title: this.$t("920139"), // 维护人
          key: ""
        },
        {
          title: this.$t("920138"), // 维护时间
          key: ""
        }
      ]
    };
  },
  mounted() {
    this.tableColumns2 = this.$time.initTableTitle(this.tableColumns2);
  },
  created() {
    // this.getmoduleData();  加载模块数据
  },
  methods: {
    // 获取模块数据
    getmoduleData() {
      axios
        .request({
          url: "",
          method: ""
        })
        .then(res => {
          this.moduleList = [];
          if (res.data.ret === 1 && res.data.data.length != 0) {
            this.moduleList = res.data.data;
          }
        });
    },
    // 搜索事件
    Search() {
      this.page = 1;
      this.pagesize = 10;
      this.tableSearch();
    },
    tableSearch() {
      var params = {
        page: this.page,
        pagesize: this.pagesize
      };
      axios
        .request({
          url: "",
          params,
          method: ""
        })
        .then(res => {
          this.total = 0; // 默认值
          this.tableData = [];
          if (res.data.ret === 1) {
            this.total = res.data.total;
            this.tableData = res.data.data;
          } else {
            this.$Message.error(this.$t("" + result.msg));
          }
        });
    },
    // 添加事件
    add() {
      this.type = 1; // 设置 type 为 1 表示是添加操作
      this.showModal = true;
    },
    // 弹框保存
    saveData(type) {
      // 必填项验证
      if (!this.addobj.moduleType) {
        this.$Message.error(this.$t("模块为必填项"));
        return false;
      } else if (!this.addobj.fileName) {
        this.$Message.error(this.$t("视频文件名必填项"));
        return false;
      } else if (!this.addobj.content) {
        this.$Message.error(this.$t("视频内容必填项"));
        return false;
      }
      // 组装请求参数
      // let data = { };
      // type 为 1 添加,  type 为 2 修改
      if (type == 1) {
        this.axios
          .request({
            url: "",
            data,
            method: ""
          })
          .then(res => {
            if (res.data.ret === 1) {
              this.showModal = false; // 隐藏
              this.$Message.success(this.$t("1055")); // 提示
              this.Search();
            } else {
              this.showModal = false; // 隐藏
              this.$Message.error(this.$t("" + result.msg)); // 提示
              this.Search();
            }
          });
      } else if (type == 2) {
        this.axios
          .request({
            url: "",
            data,
            method: ""
          })
          .then(res => {
            if (res.data.ret === 1) {
              this.showModal = false; // 隐藏
              this.$Message.success(this.$t("1060")); // 提示
              this.tableSearch();
            } else {
              this.$Message.error(this.$t("" + result.msg)); // 提示
            }
          });
      }
    },
    // 编辑事件
    edit() {
      // 非空判断
      if (
        this.detailsobj.id == "" ||
        this.detailsobj.id == null ||
        this.detailsobj.id == undefined
      ) {
        this.$Message.error(this.$t(1043));
        return false;
      }
      this.type = 2; // type 为 2 表示修改
      this.showModal = true;
      // 数据回显操作(... 字段待确定)
      // 组装请求参数
      // let params = { };
      this.axios
        .request({
          url: "",
          params,
          method: ""
        })
        .then(res => {
          if (res.data.ret === 1 && res.data.data.length !== 0) {
          }
        });
    },
    // 删除操作
    del() {
      // 非空判断
      if (
        this.detailsobj.id == "" ||
        this.detailsobj.id == null ||
        this.detailsobj.id == undefined
      ) {
        this.$Message.error(this.$t(1043));
        return false;
      } else {
        this.$Modal.confrim({
          title: this.$t("1018"),
          content: "",
          width: "290px",
          closable: true,
          okText: this.$t("1004"),
          onOk: () => {
            // 请求参数
            let params = { id: this.detailsobj.id };
            axios
              .request({
                url: "",
                params,
                method: ""
              })
              .then(res => {
                if (res.data.ret === 1) {
                  this.$Message.success(this.$t("1058"));
                  this.Search();
                } else {
                  this.$Message.error(this.$t(res.data.msg));
                  this.Search();
                }
              });
          }
        });
      }
    },

    // 点击表格事件
    handleRowChange(currentRow) {
      this.detailsobj = currentRow;
    },
    // 切换页码回调
    changePage(v) {
      console.log(v);
      this.page = v;
      // this.tableSearch();
    },
    // 切换分页回调
    handlePageSize(v) {
      console.log(v);
      this.pagesize = v;
      // this.tableSearch();
    }
  }
};
</script>
<style lang="less" scoped>
.Main > div {
  margin-bottom: 10px;
}
</style>
