
<template>
  <page-header-wrapper>
    <template v-slot:content>
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="出库时间">
                <a-range-picker
                  :placeholder="['开始日期', '结束日期']"
                  v-model="queryParam.paid_at"
                  :ranges="{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }"
                  @change="onCreateChange" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-button type="primary" @click="search"><a-icon type="search" />搜索</a-button>
              <a-button class="ml8" @click="resetSearch"><a-icon type="undo" />重置</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </template>
    <!-- 列表 -->
    <a-card :bordered="false">
      <a-card :bordered="false">
        <a-row>
          <a-col :sm="12" :xs="24">
            <info title="线上库存量剩余" value="222" :bordered="true" />
          </a-col>
          <a-col :sm="12" :xs="24">
            <info title="线下库存量剩余" value="333" :bordered="false" />
          </a-col>
        </a-row>
      </a-card>
      <br/>
      <s-table
        ref="table"
        :columns="columns"
        :data="loadData"
        :rowKey="(row) => row.order_item_id"
        showPagination="auto"
        bordered
        size="default"
        :scroll="{ x: 1200, y: 1000 }">
        <!-- 申请用户 实习顾问 法务老师 -->
        <div slot="user" slot-scope="text, record" style="color: #1890ff">
          <div>{{ record.user }}</div>
        </div>
        <!-- 创建时间 -->
        <span slot="created_at" slot-scope="text, record">{{ record.created_at }}</span>
        <!-- 操作 -->
        <div slot="actions" slot-scope="text, record">
          <a class="ant-dropdown-link" @click="onEdit(record)">修改<a-icon type="down" /></a>
        </div>
      </s-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { STable, UserInfo } from '@/components'
import DeriveButton from '@/components/OrderDetailInfo/DeriveButton'
import { institutionsExports } from '@/api/storage'
import moment from 'moment'
import Info from '@/views/home/components/Info'
import {
  getList,
  init,
  canExport
} from '@/api/organization'
import storage from 'store'
// import EditRole from './widgets/EditRole.vue'
import AddRole from './widgets/AddRole.vue'

// 列表规格
const columns = [
  {
    title: '用户名',
    dataIndex: 'user22',
    align: 'center'
  },
  {
    title: '出库时间',
    dataIndex: 'created_at',
    align: 'center',
    sorter: true
  },
  {
    title: '经销商进货明细',
    children: [
      {
        title: '线上数量',
        dataIndex: 'name33',
        key: 'name',
        align: 'center'
      },
      {
        title: '线下数量',
        dataIndex: 'name1333',
        key: 'name1',
        align: 'center'
      }
    ],
    width: 300,
    align: 'center'
  },
  {
    title: '零售出库明细',
    children: [
      {
        title: '线上数量',
        dataIndex: 'name11',
        key: 'name11',
        align: 'center'
      },
      {
        title: '线下数量',
        dataIndex: 'name12',
        key: 'name12',
        align: 'center'
      }
    ],
    width: 300,
    align: 'center'
  }
  // {
  //   title: '操作',
  //   dataIndex: 'status10',
  //   scopedSlots: { customRender: 'actions' },
  //   align: 'center',
  //   width: 160,
  //   fixed: 'right'
  // }
]

export default {
  name: 'StockOut',
  components: {
    Info,
    STable,
    UserInfo,
    DeriveButton
  },
  data () {
    return {
      exports_can: false,
      columns,
      searchType: false, // 展示全部的搜索
      businessArray: [], // 业务类型
      statusArray: [], // 机构列表

      queryParam: {
        order_no: '', // 订单编号
        institution: '', // 机构名称
        item_id: '', // 机构编号
        nickname: '', // 下单人
        business_type_id: '', // 业务类型
        status: '', // 机构状态
        paid_at: undefined, // 下单时间
        audit_at: undefined, // 执行时间
        settle_at: undefined // 结案时间
      },
      listCount: 0,
      loadData: (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        return getList(requestParameters)
      }
    }
  },
  watch: {
    $route (to, from) {
      if (
        (from.name === 'Detail' && to.name === 'FristCheckrderIndex') ||
        (from.name === 'Home' && to.name === 'FristCheckrderIndex') ||
        (from.name === 'AssignrderIndex' && to.name === 'FristCheckrderIndex') ||
        (from.name === 'SignInrderIndex' && to.name === 'FristCheckrderIndex') ||
        (from.name === 'ReCheckrderIndex' && to.name === 'FristCheckrderIndex') ||
        (from.name === 'HandleService' && to.name === 'FristCheckrderIndex') ||
        (from.name === 'CompleteOrder' && to.name === 'FristCheckrderIndex')
      ) {
        this.$refs.table.loadData()
      }
    }
  },
  created () {
    this.init()
  },
  methods: {
    moment,
    // 获取检索的基本样式
    init () {
      init().then(res => {
        this.statusArray = res.status // 机构状态
        this.businessArray = res.type // 业务类型
        this.canExports()
      })
    },
    // 更改创建时间
    onCreateChange (dates, dateStrings) {
      this.queryParam.paid_at = dateStrings
    },
    // 更改执行时间
    onCarryChange (dates, dateStrings) {
      this.queryParam.audit_at = dateStrings
    },
    // 更改结案时间
    onSettleChange (dates, dateStrings) {
      this.queryParam.settle_at = dateStrings
    },
    // 处理状态
    onDisposeChange (e) {
      this.queryParam.dispose = e
    },
    // 业务类型
    onBusinessChange (e) {
      this.queryParam.business_type_id = e
    },
    // 机构状态
    onOrganizationChange (e) {
      this.queryParam.status = e
    },
    // 搜索列表
    search () {
      this.$refs.table.refresh(true) // 重置接口且刷先到第一页
    },
    // 重置搜索列表
    resetSearch () {
      this.queryParam = {
        order_no: '', // 订单编号
        institution: '', // 机构名称
        item_id: '', // 机构编号
        nickname: '', // 下单人
        business_type_id: '', // 业务类型
        status: '', // 机构状态
        paid_at: undefined, // 下单时间
        audit_at: undefined, // 执行时间
        settle_at: undefined// 结案时间
      }
      this.$refs.table.refresh(true) // 重置接口且刷先到第一页
    },
    // 机构是否能导出
    canExports () {
      console.log('canExports')
      canExport(storage.get('userid')).then(res => {
        this.exports_can = res.exports
      })
    },
    // 导出列表
    exports () {
      const params = this.queryParam
      params.audit_at = this.queryParam.audit_at || ''
      params.paid_at = this.queryParam.paid_at || ''
      params.settle_at = this.queryParam.settle_at || ''
      if (this.listCount > 0) {
        let downUrl = institutionsExports() + '?user_id=' + storage.get('userid')
        for (const key in params) {
          downUrl = downUrl + '&' + key + '=' + params[key]
        }
        window.open(downUrl)
      } else {
        this.$notification.error({
          message: '温馨提醒',
          description: '数据为空不能下载！'
        })
      }
    },
    // 新增用户
    onAddRole () {
      console.log('add....')
      const success = {
        title: '新增用户',
        width: 600,
        maskClosable: true,
        closable: true,
        okText: '确认新增',
        cancelText: '取消'
      }
      this.$dialog(
        AddRole,
        {
          on: {
            ok: () => {
              console.log('成功了。。')
              this.$refs.table.loadData()
            }
          }
        },
        success
      )
    },
    // 修改用户
    onEdit (item) {
      console.log(item)
      // const success = {
      //   title: '修改用户',
      //   width: 600,
      //   maskClosable: true,
      //   closable: true,
      //   okText: '确认修改',
      //   cancelText: '取消'
      // }
      // this.$dialog(
      //   EditRole,
      //   {
      //     item,
      //     on: {
      //       ok: () => {
      //         console.log('成功了。。')
      //         this.$refs.table.loadData()
      //       }
      //     }
      //   },
      //   success
      // )
    }
  }
}
</script>

<style lang="less" scoped>
.ml8 {
  margin-left: 8px;
}
</style>
