<template>
  <div class="page-body">
    <div v-if="!isShow" class="main">
      <p-card title="波次管理">
        <template v-if="toggleFormTag">
          <p-grid-form
            class="mb-10"
            ref="formTarget"
            :items="gridItems"
            :span="8"
            :labelCol="{ span: 9 }"
            @submit="
              ($event, form) => {
                handleSubmit($event, form, 'formTarget')
              }
            "
          />
        </template>
        <div class="buttonlist" slot="extra">
          <p-button icon="filter" style="margin: 5px" @click="toggleFormTag = toggleFormTag ? false : true">{{
            toggleFormTag ? '隐藏' : '显示'
          }}</p-button>
          <p-button
            type="primary"
            style="margin: 5px"
            v-action:add
            @click="
              addForm()
              isShow = true
            "
            >新增</p-button
          >
          <p-button type="primary" style="margin: 5px" v-action:batchdel @click="batchDelete">批量删除</p-button>
          <imports style="margin: 5px" @handleChange="handleChange" :actionUrl="actionUrl" v-action:load></imports>
          <exportTemplate
            style="margin: 5px"
            :fileName="fileName"
            :exportData="exportData"
            v-action:download
          ></exportTemplate>
          <downLoadTemplate
            style="margin: 5px"
            :fileName="fileName"
            :downLoadUrl="downLoadUrl"
            v-action:temp
          ></downLoadTemplate>
        </div>

        <a-list style="margin: 105px 30px" :grid="{ gutter: 16, column: 8 }" :data-source="data">
          <a-list-item slot="renderItem" slot-scope="item, index">
            <a-card :title="item.title">
              {{ item.content }}
            </a-card>
          </a-list-item>
        </a-list>
        <a-list style="margin: 25px 30px" item-layout="horizontal" :data-source="data2">
          <a-list-item slot="renderItem" slot-scope="item, index">
            <a-list-item-meta>
              <a slot="title" href="https://www.antdv.com/">{{ item.title }}</a>
              <div slot="description">
                <span>wave12023123123</span>
                <span>状态:{{ item.status }}</span>
                <div>订单数：21212 明细行：121212</div>
              </div>

              <div>content</div>
              <!-- <a-avatar
          slot="avatar"
          src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
        /> -->
            </a-list-item-meta>
          </a-list-item>
        </a-list>
        <!-- <p-table
          ref="logTable"
          :rowSelectType="rowSelectType"
          :columns="tableColumnsConfig"
          :row-selection="rowSelection"
          :execute="false"
          rowKey="_row_count"
          :expandRowByClick="false"

          :dataSource.sync="dataSource"
          :pagination="10"
          bordered
        >
          <div slot="action" href="javascript:;" slot-scope="text">
            <a slot="action" style="margin: 0 5px" @click.stop="lookat(text)">查看</a>
            <a slot="action" style="margin: 0 5px" @click.stop="edit(text)">编辑</a>
            <a slot="action" style="margin: 0 5px" @click.stop="deleteOne(text)">删除</a>
          </div>
        </p-table> -->
      </p-card>
    </div>
    <detailDialog
      v-if="isShow"
      :formItem="detailFormItems"
      :isDisabled="saveOredit"
      :formData="formData"
      @clickEven="detailEvent"
    ></detailDialog>
  </div>
</template>
<script>
import { setFormItems, tableColumnsConfig, detailFormItems } from './js/config'
import imports from '@/views/example/modules/Import/import'
import downLoadTemplate from '@/views/example/modules/DownLoad/downLoadTemplate'
import exportTemplate from '@/views/example/modules/Export/exportTemplate'
import detailDialog from './modules/detailDialog.vue'
import { getList, getTreeList } from './api/index'
import { oms_std_maindata } from "@/config/serviceSettings";

const data = [
  {
    title: '合计',
    content: '21213',
  },
  {
    title: '待下发',
    content: '21213',
  },
  {
    title: '已完成',
    content: '21213',
  },
  {
    title: '库存计算中',
    content: '21213',
  },
  {
    title: '暂存区计算中',
    content: '21213',
  },
  {
    title: '容器任务计算中',
    content: '21213',
  },
  {
    title: '挂起',
    content: '21213',
  },
]
const data2 = [
  {
    title: '详情 1',
    content: '21213',
    status: '停用',
  },
  {
    title: '详情 2',
    content: '21213',
    status: '启用',
  },
  {
    title: '详情 3',
    content: '21213',
    status: '停用',
  },
  {
    title: '详情 4',
    content: '21213',
    status: '启用',
  },
]
export default {
  components: { imports, detailDialog, exportTemplate, downLoadTemplate },
  data() {
    return {
      data,
      data2,
      params: {
        url: oms_std_maindata+'/pubCustomerTransline/query/v1.0',
        params: {},
        timeout: 30000,
        headers: {
          'Content-Type': 'application/JSON',
        },
        method: 'post',
      },
      dataSource: [
        {
          customername: 1,
          branchid: '90',
          branchname: '121',
        },
      ],
      rowSelectType: 2,
      traceLinkId: '',
      detailsId: '',
      detailItem: {},
      gridItems: setFormItems(this),
      tableColumnsConfig,
      detailFormItems: detailFormItems(this),
      isShow: false,
      selectedRows: [],
      formData: {},
      saveOredit: null,
      actionUrl: oms_std_maindata+'/pubCustomerTransline/import/v1.0',
      exportData: {
        exportParams: {},
        exportUrl: oms_std_maindata+'/pubCustomerTransline/export/v1.0',
      },
      downLoadUrl: oms_std_maindata+'/pubCustomerTransline/downloadTemplate/v1.0',
      toggleFormTag: true,
      fileName: '客户与线路关联.xls',
      // rowSelection
    }
  },
  mounted() {},

  computed: {
    rowSelection() {
      let _this = this
      return {
        onSelectAll(selected, selectedRows, changeRows) {
          var checked = selected
          var key = changeRows.map((item) => item.id)
        },
        onSelect(record, selected, selectedRows, nativeEvent) {
          var checked = selected
          var key = record.id
          console.log(selectedRows)
        },
        onChange(selectedRowKeys, selectedRows) {
          _this.selectedRows = selectedRowKeys
          console.log(selectedRowKeys)
        },
      }
    },
  },
  methods: {
    lookat(data) {
      this.isShow = true
      this.formData = data
      this.saveOredit = 0
    },
    edit(data) {
      this.isShow = true
      this.saveOredit = 1
      this.formData = data
    },
    addForm() {
      this.saveOredit = 2
      this.formData = {}
    },
    handleSubmit(event, ref) {
      event.preventDefault()
      let _this = this
      console.log(this.$refs.formTarget.form)
      this.$refs.formTarget.form.validateFields((error, values) => {
        if (!error) {
          this.params.params = values
        }
      })
    },
    handleChange(info) {
      console.log(info)
    },
    batchDelete() {
    },
    deleteOne(data) {
    },
    detailEvent(event, data) {
      console.log(event, data)
      console.log(this.saveOredit)

      if (event === 'back') {
        this.isShow = false
      } else if (event === 'enable') {
        console.log(data)
        data.status = '1'
      } else if (event === 'stopUsing') {
        data.status = '5'
      } else if (event === 'save') {
        if (this.saveOredit === 1) {
        } else if (this.saveOredit === 2) {
          console.log('保存')
          addDetail(data).then((res) => {
            if (res.success) {
              this.$message.success(res.message)
              this.isShow = false
              this.$nextTick(() => {
                this.$refs.logTable.reload()
              })
            } else {
              this.$message.error(res.message)
            }
          })
        }
      }
    },
  },
}
</script>
<style lang='less' >
.ml-10 {
  margin-left: 10px;
}
.buttonlist {
  display: flex;
  justify-content: flex-end;
  // margin-bottom: 20px;
  // border-bottom: 1px solid #e8e8e8;
}
.buttonlist1 {
  display: flex;
  justify-content: space-between;
}
.mb-10 {
  margin-bottom: 10px;
}
.ant-table-body {
  overflow: auto;
}
.fmain {
  background: #fff;
  border: 1px solid #e8e8e8;
  padding: 5px;
  .fcontent {
    line-height: 30px;
    .flabel {
      display: inline-block;
      width: 70px;
      font-weight: bold;
      vertical-align: top;
      &::after {
        display: inline-block;
        content: ':';
      }
    }
    .fvalue {
      white-space: pre-wrap;
      margin-left: 5px;
      display: inline-block;
    }
  }
}
</style>
