import type { CurrentUser } from "umi";
import { connect } from "umi";
import type { ConnectState } from "@/models/connect";
import { Col, Row } from "antd";
import ProForm, {
  ProFormDateTimePicker, ProFormDigit,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  ProFormTreeSelect
} from "@ant-design/pro-form";
import { getServerpartTree } from "@/services/options";
import moment from "moment/moment";
import React, { useEffect, useRef, useState } from "react";
import './detail.less'
import { handleGetServerpartShopTrade } from "@/pages/reports/productControl/commodityInfo/service";

const detail = ({ currentUser, treeView, currentRow, showHotKeyEdit, setGetNewHotKey }: { currentUser?: any, treeView?: any, currentRow: any, showHotKeyEdit?: boolean, setGetNewHotKey: any }) => {
  const modalFormRef = useRef<any>();
  const [commodityList, setCommodityList] = useState<any>([])

  useEffect(() => {
    handleGetCommodity()
  }, [currentRow])
  const handleGetCommodity = async (id: any) => {
    const req: any = {
      ProvinceCode: currentUser?.USER_PROVINCE,
      ServerpartId: currentRow?.SERVERPART_ID
    }
    const data = await handleGetServerpartShopTrade(req)
    console.log('data', data)
    setCommodityList(data)
  }

  return (
    <div style={{ width: '100%', boxSizing: 'border-box', padding: '24rpx' }}>
      <ProForm
        formRef={modalFormRef}
        submitter={false}
        initialValues={{ ...currentRow, ADDTIME: moment(currentRow?.ADDTIME).format('YYYY-MM-DD HH:mm:ss') }}
        layout={'horizontal'}
      >
        <div className={'modalTitle'}>商品基本信息</div>
        <Row gutter={16}>
          <Col span={16}>
            <ProFormText
              name="COMMODITY_NAME"
              label="商品名称"
              placeholder="请输入商品名称"
              readonly
            />
          </Col>
          <Col span={8}>
            <ProFormText
              name="COMMODITY_EN"
              label="拼音简码"
              readonly
            />
          </Col>

          <Col span={8}>
            <ProFormSelect
              name="SERVERPART_ID"
              label="服务区名"
              readonly
              request={async () => {
                const data = await getServerpartTree(currentUser?.ProvinceCode, currentUser?.CityAuthority, true, true, true)
                const list: any = []
                if (data && data.length > 0) {
                  data.forEach((item: any) => {
                    if (item.children && item.children.length > 0) {
                      item.children.forEach((subItem: any) => {
                        list.push({ label: subItem.label, value: subItem.value })
                      })
                    }
                  })
                  data.forEach((item: any) => {
                    list.push({ label: item.label, value: item.value })
                  })
                }
                return list
              }}
            />
          </Col>
          <Col span={8}>
            <ProFormSelect
              name="BUSINESSTYPE"
              label="商品业态"
              readonly
              options={commodityList}
            />
          </Col>
          <Col span={8}>
            <ProFormTreeSelect
              name="COMMODITY_TYPE"
              label="商品类别"
              readonly
              request={() => {
                return treeView
              }}
              fieldProps={{
                treeDefaultExpandAll: true
              }}
            />
          </Col>

          <Col span={8}>
            <ProFormText
              name="COMMODITY_BARCODE"
              label="商品条码"
              readonly
              disabled={currentRow}
            />
          </Col>
          <Col span={8}>
            <ProFormText
              name="COMMODITY_UNIT"
              label="商品单位"
              readonly
            />
          </Col>
          <Col span={8}>
            <ProFormText
              name="COMMODITY_RULE"
              label="商品规格"
              readonly
            />
          </Col>

          <Col span={8}>
            <ProFormText
              name="COMMODITY_HOTKEY"
              label="快捷键值"
              readonly={!showHotKeyEdit}
              fieldProps={{
                onChange: (e: any) => {
                  setGetNewHotKey(e.target.value)
                }
              }}
            />
          </Col>
          <Col span={8}>
            <ProFormSelect
              name="COMMODITY_GRADE"
              label="质量等级"
              readonly
              initialValue={1000}
              options={[{ label: '一等品', value: 1000 }, { label: '二等品', value: 2000 }, { label: '三等品', value: 5000 }, { label: '优等品', value: 3000 }, { label: '合格品', value: 4000 },]}
            />
          </Col>
          <Col span={8}>
            <ProFormText
              name="COMMODITY_ORI"
              label="商品产地"
              readonly
            />
          </Col>

          <Col span={8}>
            <ProFormSelect
              name="USERDEFINEDTYPE_ID"
              label="自定义类"
              readonly
            />
          </Col>
          <Col span={8}>
            <ProFormText
              name="PROVINCE_CODE"
              label="省份编码"
              readonly
            />
          </Col>
          <Col span={8}>
            <ProFormText
              name="COMMODITY_CODE"
              label="商品编码"
              readonly
            />
          </Col>

          <Col span={24}>
            <div style={{ marginBottom: '24px', display: 'flex', alignItems: "flex-start" }}>
              <span style={{ display: 'inline-block', width: '70px' }}>商品说明：</span>
              <span style={{ display: 'inline-block', whiteSpace: 'pre-line', lineHeight: '22px' }}>{currentRow?.COMMODITY_DESC}</span>
            </div>
            {/* <ProFormTextArea */}
            {/*   name="COMMODITY_DESC" */}
            {/*   label="商品说明" */}
            {/*   readonly */}
            {/* /> */}
          </Col>
        </Row>
        <div className={'modalTitle'}>商品状态信息</div>
        <Row gutter={16}>
          <Col span={8}>
            <ProFormSelect
              name="CANSALE"
              label="是否销售"
              readonly
              initialValue={1}
              options={[{ label: '是', value: 1 }, { label: '否', value: 0 }]}
            />
          </Col>
          <Col span={8}>
            <ProFormSelect
              name="ISBULK"
              label="是否散装"
              readonly
              initialValue={0}
              options={[{ label: '是', value: 1 }, { label: '否', value: 0 }]}
            />
          </Col>
          <Col span={8}>
            <ProFormSelect
              name="METERINGMETHOD"
              label="称重方式"
              readonly
              initialValue={1}
              options={[{ label: '计价', value: 1 }, { label: '散装称重', value: 0 }]}
            />
          </Col>


          <Col span={8}>
            <ProFormSelect
              name="COMMODITY_STATE"
              label="审核状态"
              readonly
              initialValue={1}
              options={[{ label: '有效', value: 1 }, { label: '审核中', value: 2 }, { label: '无效', value: 0 }]}
            />
          </Col>
          <Col span={8}>
            <ProFormText
              name="ADDTIME"
              label="添加时间"
              readonly
              initialValue={moment().format('YYYY-MM-DD HH:mm:ss')}
            />
          </Col>
          <Col span={8}>
            <ProFormDateTimePicker
              name="OPERATE_DATE"
              label="生效时间"
              readonly
              initialValue={moment().format('YYYY-MM-DD HH:mm:ss')}
            />
          </Col>
        </Row>
        <div className={'modalTitle'}>商品价格信息</div>
        <Row gutter={16}>
          <Col span={8}>
            <ProFormDigit
              name="COMMODITY_RETAILPRICE"
              label="零售价"
              readonly
            />
          </Col>
          <Col span={8}>
            <ProFormDigit
              name="COMMODITY_CURRPRICE"
              label="当前价格"
              readonly
            />
          </Col>
          <Col span={8}>
            <ProFormDigit
              name="COMMODITY_MEMBERPRICE"
              label="会员价"
              readonly
            />
          </Col>

          <Col span={8}>
            <ProFormDigit
              name="COMMODITY_PURCHASEPRICE"
              label="进货价"
              readonly
            />
          </Col>
          <Col span={8}>
            <ProFormDigit
              name="COMMODITY_MINPRICE"
              label="最低价"
              readonly
            />
          </Col>
          <Col span={8}>
            <ProFormDigit
              name="COMMODITY_MAXPRICE"
              label="最高价"
              readonly
            />
          </Col>
        </Row>
        <div className={'modalTitle'}>商品进销信息</div>
        <Row gutter={16}>
          <Col span={8}>
            <ProFormDigit
              name="DUTY_PARAGRAPH"
              label="进价税率"
              readonly
            />
          </Col>
          <Col span={8}>
            <ProFormDigit
              name="RETAIL_DUTY"
              label="零售税率"
              readonly
            />
          </Col>
          <Col span={8}>
            <ProFormSelect
              name="COMMODITY_FROZENCOUNT"
              label="采购状态"
              readonly
              options={[{ label: '允许', value: 1000 }, { label: '禁止', value: 2000 }]}
            />
          </Col>
        </Row>
      </ProForm>
    </div>
  )
}
export default connect(({ user }: ConnectState) => ({
  currentUser: user.currentUser
}))(detail);
