<template>
  <div class="app-container">
    <div class="box-container">
      <div class="contain-title">企业产品</div>
      <div class="contian-operate" v-if="companyId">
        <el-button type="primary" @click="addProductInfo">发布产品</el-button>
      </div>
    </div>
    <div class="content-container">
      <div class="select-box" v-if="!companyId">
        <p>请选择需要查看的企业</p>
        <el-select
          v-model="selectComp"
          filterable
          remote
          maxlength="50"
          placeholder="搜索企业名称"
          :remote-method="remoteCompName"
          :loading="selectLoading"
          suffix-icon="el-icon-search"
          @change="compChanged">
          <el-option
            v-for="item in compOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div v-else>
        <div class="lit-tit">{{companyName}}</div>
        <el-table
          :data="tableData"
          height="600"
          v-loading="tableLoading"
          border>
          <el-table-column
            v-for="item in tableItem"
            :key="item.index"
            :prop="item.prop ? item.prop : ''"
            :label="item.tit ? item.tit : ''"
            :width="item.width ? item.width : ''"
            align="center">
            <template slot-scope="scope">
              <div v-if="scope.row[item.prop]">
                <el-button type="text" v-if="item.link"><a :href="queryDetailShow(scope.row.id)" target="_blank">{{scope.row[item.prop]}}</a></el-button>
                <span v-else>{{scope.row[item.prop]}}</span>
              </div>
              <div class="operate-row" v-if="item.operate && typeof scope.row === 'object'">
                <el-button
                  size="medium"
                  type="primary"
                  @click="handelEdit(scope.row)">修改</el-button>
                <el-button
                  size="medium"
                  type="danger"
                  @click="handelDel(scope.row.id)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page.sync="pageNo"
            :page-size="pageSize"
            layout="prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  queryCompanyOne,
  queryCompName,
  pageProduct,
  delProduct
} from '@/api/companyCen'
import { urlParse, parseTime, xtUrl } from '@/utils'
import comTable from '@/utils/comTable'
export default {
  data() {
    return {
      companyId: '',
      companyName: '',
      selectComp: '',
      compOptions: [],
      selectLoading: false,
      pageSize: 10,
      pageNo: 1,
      total: 0,
      tableData: [],
      tableLoading: true,
      tableItem: [
        {
          prop: 'name',
          tit: '产品名称',
          link: true
        },
        {
          prop: 'spec',
          tit: '厂商型号'
        },
        {
          prop: 'createTime',
          tit: '创建时间',
          width: '160'
        },
        {
          operate: true,
          width: '200'
        }
      ]
    }
  },
  created() {
    if (urlParse('cid')) {
      this.companyId = urlParse('cid')
      this.getCompanyInfo()
      this.pageQuery()
    }
  },
  methods: {
    getCompanyInfo() {
      var that = this
      that.$http.get(queryCompanyOne, {
        id: that.companyId
      }, function(res) {
        if (res.success) {
          that.companyName = res.data.name
        }
      })
    },
    pageQuery() {
      var that = this
      this.$http.get(pageProduct, {
        companyId: that.companyId,
        pageSize: that.pageSize,
        pageNo: that.pageNo
      }, function(res) {
        that.tableLoading = false
        if (res.success && res.data) {
          const obj = res.data.data
          if (obj.length > 0) {
            for (let i = 0; i < obj.length; ++i) {
              if (obj[i].createTime) {
                obj[i].createTime = parseTime(obj[i].createTime)
              }
            }
            that.total = res.data.total
            that.tableData = obj
            comTable.gapFilling(that.tableData)
          } else {
            that.pageNo = 1
            that.total = 0
            that.tableData = []
          }
        } else {
          that.pageNo = 1
          that.total = 0
          that.tableData = []
        }
      })
    },
    addProductInfo() {
      this.$router.push({
        name: 'productInfo',
        query: { cid: this.companyId }
      })
    },
    handelEdit(row) {
      this.$router.push({
        name: 'productInfo',
        query: { id: row.id, cid: row.companyId }
      })
    },
    handelDel(id) {
      var that = this
      that.$confirm(`确认删除该产品？`, '提示信息', {
        type: 'warning',
        center: true
      }).then(() => {
        that.$http.post(delProduct, {
          id: id
        }, function(res) {
          if (res.success) {
            if (res.data) {
              that.pageNo = 1
              that.total = 0
              that.tableData = []
              this.pageQuery()
            } else {
              that.$message({
                type: 'warning',
                message: '该产品删除失败，请重试'
              })
            }
          }
        })
      })
    },
    remoteCompName(query) {
      var that = this
      if (query !== '') {
        that.selectLoading = true
        that.$http.get(queryCompName, {
          name: query,
          size: 5
        }, function(res) {
          that.selectLoading = false
          if (res.success && res.data) {
            const obj = res.data
            that.compOptions = obj.map(item => {
              return { value: item.id, label: item.name }
            })
          } else {
            that.compOptions = []
          }
        })
      } else {
        that.compOptions = []
      }
    },
    compChanged(val) {
      this.$router.push({
        name: 'compProduct',
        query: { cid: val }
      })
    },
    handleCurrentChange(val) {
      this.pageNo = val
      this.pageQuery()
    },
    queryDetailShow(id) {
      return xtUrl + '/product.html?id=' + id
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  .select-box{
    width:350px;
    margin: 15% auto 22%;
    p{
      font-size: 20px;
      font-weight: bold;
      line-height: 40px;
      text-align: center;
    }
  }
  .lit-tit{
    font-size: 17px;
    line-height: 30px;
    margin-bottom: 10px;
  }
</style>