<template>
  <div class="app-container">
    <el-container>
      <!-- <park-tree v-loading="loading" is-filter has-childern-ids :filter-info="{ key: 'type', value: 'ent' }" @changeTree="changePark" /> -->
      <el-main>
        <!-- 已完成订单 -->
        <el-row>
          <el-form ref="searchForm" :model="searchForm" :inline="true" @keyup.enter.native="handleSearch">
            <el-form-item label="所属企业" prop="companyId">
              <CompanySelect v-model="searchForm.companyId" @change="(e) => Object.assign(searchForm, e)" />
            </el-form-item>
            <el-form-item label="项目名称"><el-input v-model.trim="searchForm.name" clearable placeholder="请输入项目名称" /></el-form-item>
            <el-form-item label="项目编号"><el-input v-model.trim="searchForm.projectNo" clearable placeholder="请输入项目编号" /></el-form-item>
            <!-- <el-form-item label="项目状态">
              <el-select v-model.trim="searchForm.status" clearable placeholder="请选择状态">
                <el-option value="" label="全部" />
                <el-option :value="1" label="正常" />
                <el-option :value="0" label="已停用" />
              </el-select>
            </el-form-item> -->
            <el-form-item>
              <el-button type="primary" :loading="loading" @click="handleSearch">查询</el-button>
              <el-button :loading="loading" @click="handleReset">重置</el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <el-row class="mb-20">
          <span class="list-title">项目管理列表</span>
          <el-button v-if="filterButton('projectManage_add')" type="primary" @click="operateFunc">新增</el-button>
        </el-row>
        <elm-table
          :table-data="list"
          :colum-obj="columObj"
          :loading="loading"
          v-bind="$attrs"
          :tree-props="{ children: 'child' }"
          v-on="$listeners"
          @rowOperation="rowOperation"
        />
        <el-row v-if="total > 0" class="text-center">
          <el-pagination
            background
            :current-page="query.current"
            :page-sizes="[10, 20, 50, 100, 200]"
            :page-size="query.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @pagination="getList"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
        <!-- 新增、编辑弹窗 -->
        <operateDialog ref="operateDialog" :form="form" :op-type="opType" :company="company" :product-list="addProductList" @submitBtn="submitBtn" />
      </el-main>
    </el-container>
  </div>
</template>

<script>
import lodash from 'lodash'
import {
  resetCount,
  getProjectList,
  addProject,
  editProject,
  enable,
  disable
} from '@/apiV2/projectManage'
import ElmTable from '@/components/ElmTable/index.vue'
import {
  base
} from '@/mixins/base'
export default {
  name: '项目管理',
  components: {
    operateDialog: () => import('./components/operateDialog.vue'),
    ElmTable
  },
  mixins: [base],
  data() {
    this.stateMap = new Map()
    return {
      columObj: {
        lazy: 'true',
        hasIndex: true,
        columnData: [
          { text: true, prop: 'projectNo', label: '项目编号', minwidth: '100' },
          { ownDefined: true, prop: 'name', label: '项目名称', ownDefinedReturn: row => { return row.name || '--' }, minwidth: '100' },
          { ownDefined: true, prop: 'companyName', label: '所属企业', ownDefinedReturn: row => { return row.companyName || '--' }, minwidth: '100' },
          { ownDefined: true, prop: 'cloudToken', label: '授权密钥', ownDefinedReturn: row => { return row.cloudToken || '--' }, minwidth: '100' },
          { ownDefined: true, prop: 'status', label: '联云配置', ownDefinedReturn: row => { return row.cloudConfigStatus == 1 ? '已配置' : '未配置' } },
          { ownDefined: true, prop: 'status', label: '联云状态', ownDefinedReturn: row => { return row.mqttStatus == 1 ? '在线' : '离线' } },
          { ownDefined: true, prop: 'createName', label: '创建人', ownDefinedReturn: row => { return row.createName || '--' }, minwidth: '100' },
          { ownDefined: true, prop: 'createTime', label: '创建时间', ownDefinedReturn: row => { return row.createTime || '--' }, minwidth: '150', sortable: true, sortBy: 'date' },
          {
            isOperation: true, prop: 'operation', label: '操作', minwidth: '150', fixed: 'right', tooltip: false,
            operation: [
              { operation: 'edit', type: 'text', label: '编辑', isShow: row => { return this.filterButton('projectManage_edit') } },
              { operation: 'disabled', type: 'text', labelRow: (row) => { return row.status ? '停用' : '启用' }, isShow: row => { return this.filterButton('projectManage_disabled') } }
            ]
          }
        ]
      },
      searchForm: {
        name: '',
        projectNo: '',
        status: '',
        companyId: '',
        companyName: ''
      },
      form: {},
      company: {
        name: '',
        id: ''
      },
      loading: false,
      list: [],
      total: 0,
      info: null,
      parkList: [],
      detailInfo: null,
      rowInfo: {},
      parkname: '',
      productList: [],
      addProductList: [],
      opType: ''
    }
  },
  computed: {
  },
  created() {
    this.getList()
  },
  methods: {
    rowOperation(row, $index, event) {
      this.event = event
      switch (event) {
        case 'edit':
          this.editFunc(row)
          break
        case 'disabled' :
          this.disableFunc(row)
          break
      }
    },
    editFunc(row) {
      this.opType = 'edit'
      this.$refs.operateDialog.open()
      this.form = lodash.cloneDeep(row)
    },
    // 列表分页
    // handleSizeChange(val) {
    //   this.searchForm.size = val
    //   this.getList()
    // },
    // handleCurrentChange(val) {
    //   this.searchForm.current = val
    //   this.getList()
    // },
    // 获取列表数据
    getList() {
      this.loading = true
      getProjectList({ ...this.searchForm, ...this.query }).then(res => {
        if (res.success) {
          this.list = lodash.cloneDeep(res.data.records)
          this.total = res.data.total
        }
        this.loading = false
      })
    },
    // 新增编辑方法
    operateFunc() {
      this.opType = 'add'
      this.$refs.operateDialog.open()
      this.form = {
        isUploadPic: false
      }
    },
    // 禁用
    disableFunc(row) {
      var txt = `<p class="text-center">您确定要${
        row.status ? '停用' : '启用'
      }项目【${row.name}】吗？</p>`
      this.$confirm(txt, '温馨提示', {
        dangerouslyUseHTMLString: true,
        type: 'none'
      })
        .then(() => {
          (row.status ? disable({
            id: row.id
          }) : enable({
            id: row.id
          })).then(res => {
            if (res.success) {
              this.loading = false
              this.getList()
            } else {
              this.loading = false
            }
          })
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 搜索、重置
    handleSearch() {
      this.query.current = 1
      this.list = []
      this.getList()
    },
    handleReset() {
      this.searchForm = {
        name: '',
        projectNo: '',
        status: ''
      },
      this.handleSearch()
    },
    submitBtn(val) {
      const obj = lodash.cloneDeep(val)
      this.$refs.operateDialog.loading = true
      let fun
      if (this.opType == 'add') {
        fun = addProject
      } else {
        fun = editProject
      }
      fun(obj).then(res => {
        this.$refs.operateDialog.loading = false
        if (res.success) {
          this.getList()
          this.$refs.operateDialog.close()
        } else {
          this.loading = false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
