<template>
  <div v-loading="loading">
    <div class="heior_box">
      <div class="search-box">
        <el-input v-model="searchModel.keyWord" placeholder="请输入产品名称" clearable size="small">
          <el-button slot="append" icon="el-icon-search" @click="get"></el-button>
        </el-input>
      </div>
    </div>
    <el-table :data="retData.Data" row-key="Id" border size="medium" :height="$getHeight(100)">
      <el-table-column prop="Name" label="产品名称" width="180"></el-table-column>
      <el-table-column prop="PcClientDownloadUrl" label="电脑客户端">
        <template slot-scope="scope">
          <!-- <span><i class="el-icon-copy-document"></i>复制</span> 	 -->
          <cutTip :text="scope.row.PcClientDownloadUrl"></cutTip>
        </template>
      </el-table-column>
      <el-table-column prop="SimulatorDownloadUrl" label="模拟器">
        <template slot-scope="scope">
          <cutTip :text="scope.row.SimulatorDownloadUrl"></cutTip>
        </template>
      </el-table-column>
      <el-table-column prop="DroidDownloadUrl" label="安卓客户端">
        <template slot-scope="scope">
          <cutTip :text="scope.row.SimulatorDownloadUrl"></cutTip>
        </template>
      </el-table-column>
      <el-table-column prop="IosDownloadUrl" label="Ios客户端">
        <template slot-scope="scope">
          <cutTip :text="scope.row.SimulatorDownloadUrl"></cutTip>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <span class="handel cursor edit" @click="goEdit(scope.row)">编辑</span>          
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        v-if="retData.Data.length>0"
        @current-change="get"
        :page-size="50"
        :current-page.sync="searchModel.PageIndex"
        layout="total,prev, pager, next"
        :total="retData.TotalCount"
      ></el-pagination>
    </div>
    <el-dialog title="软件下载配置" :visible.sync="showDialog" width="400px">
      <el-form :model="currentProduct" :rules="rules" ref="inputProductForm" label-width="100px">
        <el-form-item prop="PcClientDownloadUrl" label="电脑客户端">
          <el-input v-model="currentProduct.PcClientDownloadUrl" size="small"></el-input>
        </el-form-item>
        <el-form-item prop="DroidDownloadUrl" label="安卓客户端">
          <el-input v-model="currentProduct.DroidDownloadUrl" size="small"></el-input>
        </el-form-item>
        <el-form-item prop="IosDownloadUrl" label="Ios客户端">
          <el-input v-model="currentProduct.IosDownloadUrl" size="small"></el-input>
        </el-form-item>
        <el-form-item prop="SimulatorDownloadUrl" label="模拟器">
          <el-input v-model="currentProduct.SimulatorDownloadUrl" size="small"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm">取 消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "treeTable",
  components: {
    cutTip: () => import("@/components/common/cutTip")
  },
  data() {
    return {
      showDialog: false,
      loading: false,
      retData: { TotalCount: 0, Data: [] },
      searchModel: {
        PageIndex: 1,
        keyWord: ""
      },
      currentProduct: {
        Id: 0,
        Name: "",
        Profile: "",
        Image: ""
      },
      rules: {}
    };
  },
  created() {
    this.$store.commit("setCurrentNav", "产品管理>>下载配置");
    this.get();
  },
  methods: {
    get() {
      this.loading = true;
      this.$api.get("course/v1/product/page", this.searchModel).then(res => {
        this.retData = res;
        this.loading = false;
      });
    },
    goEdit(item) {
      this.currentProduct = item;
      this.showDialog = true;
    },
    save() {
      this.$api
        .post("course/v1/product/putSoft", this.currentProduct)
        .then(res => {
          this.resetForm();
          this.get();
        });
    },
    resetForm() {
      this.$refs["inputProductForm"].resetFields();
      this.showDialog = false;
    }
  }
};
</script>
<style scoped>
</style>
