<template>
  <div class="dark:!bg-[#060818] bg-white p-3" >
    <div class="search bg-white p-3">
      <el-form ref="advancedFormRef" :model="advancedForm">
        <el-row>
          <el-col :xs="24" :sm="24" :md="6" :lg="5" :xl="6">
            <el-form-item :label="$t('outBound')">
              <el-date-picker
                v-model="advancedForm.goodsExchange_time_range"
                type="daterange"
                align="center"
                :editable="false"
                unlink-panels
                :clearable="true"
                :default-time="['00:00:00', '23:59:59']"
                range-separator="-"
                :start-placeholder="$t('start_time')"
                :end-placeholder="$t('end_time')"
                value-format="timestamp"
                :picker-options="{
                  disabledDate(time) {
                    return time.getTime() - 1 >= new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()).getTime() + 86400000 - 1;
                  },
                }"
              ></el-date-picker><!--  shortcuts: MixinPickerShortcuts, -->
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="7" :lg="3" :xl="7" class="mb-4 mr-3 ml-3">
            <el-form-item :label="$t('warechouse')">
              <el-select v-model="advancedForm.warehouse_id" clearable>
                <el-option v-for="item in warehouseList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="1" :xl="6" class="mb-4 flex items-end">
            <el-button class="w-full mt-1" @click="advancedSearchEvent"> {{ $t('search') }} </el-button>
          </el-col>
          <!--   <el-col :span="6" v-if="activeName === 'second'">
              <el-form-item label="入库类型">
                <el-select v-model="advancedForm.type" clearable>
                  <el-option v-for="item in entryList" :key="item.id" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="activeName === 'second'">
              <el-form-item label="客户名称">
                <el-input v-model="advancedForm.customer_name" clearable placeholder="请输入客户名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="activeName === 'second'">
              <el-form-item label="手机号">
                <el-input v-model="advancedForm.customer_phone" clearable placeholder="请输入手机号"></el-input>
              </el-form-item>
            </el-col> -->
        </el-row>
      </el-form>
      <!-- <div class="flex justify-end">
        <el-button class="mr-3" @click="advancedSearchEvent"> {{$t('search')}} </el-button>
      </div> -->
    </div>

    <en-table-layout :tableData="tableData.data" :loading="loading" @selection-change="handleSelectionChange">
      <template #toolbar>
        <div class="inner-toolbar">
          <div class="toolbar-btns">
            <!-- <el-button size="small" v-if="checkPermission(['addInventory']) && activeName === 'second'" type="primary" @click="handleAddGoodsExchange"
                >新增入库</el-buttonv-if="checkPermission(['goodsExchangeAdd'])"
              > -->
            <el-button size="small" type="primary" v-if="store.state.user.user.founder!==1" @click="handleShiftGoodsExchange">{{$t('addOut')}}</el-button>
          </div>
        </div>
      </template>

      <template #table-columns>
        <el-table-column type="selection" width="55" />
        <el-table-column prop="sn" :label="$t('out_sn')">
          <template #default="scope">
            {{ scope.row.sn }}
          </template>
        </el-table-column>
        <el-table-column prop="warehouse_id" :label="$t('warechouse_name')">
          <template #default="scope">
            {{ warehouseName(scope.row.warehouse_id) }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="warehouse_id" label="客户名称">
          <template #default="scope">
            {{ scope.row.customer_name }}
          </template>
        </el-table-column>
        <el-table-column prop="warehouse_id" label="客户手机号">
          <template #default="scope">
            {{ scope.row.customer_phone }}
          </template>
        </el-table-column> -->
        <el-table-column :label="$t('out_type')">
          <template #default="scope">
            <span>{{ outName(scope.row.type) }}</span>
          </template>
        </el-table-column>
      <!--   <el-table-column prop="order_id_list" label="订单编号" /> -->
        <el-table-column :label="$t('warehousing_state')">
          <template #default="scope">
            <span>{{ scope.row.has_submit === 'Y' ? $t('inOut') : $t('notOut') }}</span>
          </template>
        </el-table-column>
        <el-table-column  :label="$t('outTime')">
          <template #default="scope">
            <span>{{ scope.row.create_time }}</span>
          </template>
        </el-table-column>
        <el-table-column  :label="$t('notes')">
          <template #default="scope">
            <span>{{ scope.row.notes }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('operate')" fixed="right"  width="300">
          <template #default="scope">
            <!-- v-if="checkPermission(['checkInventory'])" -->
            <el-button size="small"  @click="handleAuditGoodsExchange(scope.row)">{{$t('view')}}</el-button>
            <!-- && checkPermission(['editInventory']) && checkPermission(['goodsExchangeEdit']) -->
            <el-button
              size="small"
              v-if="scope.row.has_submit === 'N' && store.state.user.user.founder!==1"
              @click="handleEditGoodsExchange(scope.row)"
              >{{$t('outBound')}}</el-button
            >
          </template>
        </el-table-column>
      </template>

      <el-pagination
        v-if="tableData.data && tableData.data.length"
        @size-change="handlePageSizeChange"
        @current-change="handlePageCurrentChange"
        :current-page="tableData.page_no"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="tableData.page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.data_total"
      ></el-pagination>
    </en-table-layout>
  </div>
</template>
    
    <script setup>
import { ref, reactive, onMounted, watchEffect } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import * as API_GoodsExchange from '@/api/goodsExchange';
import * as API_Setting from '@/api/setting';
import * as API_BasicSetting from '@/api/basicSetting';
import { useStore } from 'vuex';
const store = useStore();
const router = useRouter();
const route = useRoute();

const warehouseList = ref([]);
const deptList = ref([]);
const loading = ref(false);
const params = reactive({
  page_no: 1,
  page_size: 10,
  company_id: store.state.companId,
});
const advancedForm = reactive({});
const tableData = ref('');
const dialogVisible = ref(false);
const multipleSelection = ref([]);
const goodsExchangeForm = reactive({});
const activeName = ref('second');
const entryList = ref([]);
const outList = ref([]);
const advancedFormRef = ref(null);

const GET_WarehouseList = () => {
  API_BasicSetting.getWarehouseListAll().then((response) => {
    warehouseList.value = response;
  });
};

const GET_DeptList = () => {
  /* API_Setting.getPage({ dictType: 'warehouse_entry_type' }).then((res) => {
    entryList.value = res.data;
  }); */
  API_Setting.getPage({ dictType: 'out_warehouse_type' }).then((res) => {
    outList.value = res.data;
  });
};

const GET_GoodsExchangeList = () => {
  loading.value = true;
  API_GoodsExchange.getWarehouseOut(params)
    .then((response) => {
      loading.value = false;
      tableData.value = response;
    })
    .catch(() => {
      loading.value = false;
    });
};

const GET_WarehouseEntry = () => {
  loading.value = true;
  API_GoodsExchange.getWarehouseEntry(params)
    .then((response) => {
      loading.value = false;
      tableData.value = response;
    })
    .catch(() => {
      loading.value = false;
    });
};

const handleClick = (tab) => {
  activeName.value = tab.name;
  params.page_no = 1;
  GET_GoodsExchangeList();
};

const handleEditGoodsExchange = (row) => {
  router.push({
    name: 'addOutbound',
    query: { id: row.id, type: 'edit' },
  });
};

const handleAuditGoodsExchange = (row) => {
  router.push({
    name: 'addOutbound',
    query: {
      id: row.id,
      type: 'view',
    },
  });
};

const handleSelectionChange = (val) => {
  multipleSelection.value = val;
};

const handlePageSizeChange = (size) => {
  params.page_size = size;
  GET_GoodsExchangeList();
};

const handlePageCurrentChange = (page) => {
  params.page_no = page;
  GET_GoodsExchangeList();
};

const handleShiftGoodsExchange = () => {
  router.push({
    name: 'addOutbound',
  });
};

const handleAddGoodsExchange = () => {
  router.push({
    name: 'addOutbound',
    params: { callback: GET_GoodsExchangeList, type: 'second' },
  });
};

const advancedSearchEvent = () => {
  Object.assign(params, advancedForm);
  delete params.start_time;
  delete params.end_time;
  if (advancedForm.goodsExchange_time_range) {
    params.start_time = parseInt(Number(advancedForm.goodsExchange_time_range[0]) / 1000);
    params.end_time = parseInt(Number(advancedForm.goodsExchange_time_range[1]) / 1000);
  }
  delete params.goodsExchange_time_range;
  params.page_no = 1;
  GET_GoodsExchangeList();
};

const warehouseName = (val) => {
  let name = '';
  warehouseList.value.map((el) => {
    if (el.id === val) {
      name = el.name;
    }
  });
  return name;
};

const outName = (val) => {
  let name = '';
  outList.value.map((el) => {
    if (el.value === val) {
      name = el.label;
    }
  });
  return name;
};

const entryName = (val) => {
  let name = '';
  entryList.value.map((el) => {
    if (el.value === val) {
      name = el.label;
    }
  });
  return name;
};

onMounted(() => {
  GET_GoodsExchangeList();
  GET_DeptList();
  GET_WarehouseList();
});

watchEffect(() => {
  if (route.query.status) {
    params.status = route.query.status;
    advancedForm.status = route.query.status;
  }
  params.page_no = 1;

  GET_GoodsExchangeList();
});
</script>